科讯新手发一个简单漂亮栏目导航条（含制作方法）-领先建站CMS提供服务商我们专注于CMS建站产品的研发

117175 查看	229 回复

主题：科讯新手发一个简单漂亮栏目导航条（含制作方法） [收藏主题]

转到：

xixiwin 当前离线

50 主题	0 广播	1 粉丝

级别:学前班

用户积分:252 分
登录次数:10 次
注册时间:2009/9/26
最后登录:2009/12/26

xixiwin 发表于：2009/12/12 2:35:00 | 只看该作者查看该作者主题楼主

有生源找课程就上科汛课堂街!

本人新手，高手请绕道，希望能对比本人还菜的新手有帮助，第一次发帖，谢谢。

希望高手指点不足之处。

新手制作，复制粘贴到适当的位置即可使用。

先看效果，鼠标经过动感门帘效果，个人感觉很酷，不敢独享，发出来与大家共享。

此主题相关图片如下：导航条.png

鼠标经过效果如下：

有点像拉窗帘的动画效果

鼠标刚刚移动上的效果

此主题相关图片如下：导航条1.png

鼠标移动上之后的效果

此主题相关图片如下：导航条2.png

第一步：制作页面代码（只写出来导航条部分的代码，其余部分省略）

<html>

以下内容只有回复后才可以浏览,请先登录！

</html>

第二步：制作循环栏目标签

1，添加自定义函数标签

标签--->自定义sql函数标签--->添加标签

标签名称：栏目导航

......

Ajax调用：选择“否”

选择：下一步，添加查询语句及循环语句

查询语句： select top 10 id,foldername,ClassDefineContent from KS_class where tj=1 order by root （如果频道栏目超过10个，修改top “栏目数值”）

循环体：[loop=8]
<li {$Field(ClassDefineContent,Text,0,...,0,)}><a href="{$Field(ID,GetInfoUrl,100,1)}"><span>{$Field(FolderName,Text,0,...,0,)}</span></a></li>
[/loop]

2，设置导航条css样式

body { background:#fff;}

.menunav:after {content:"."display:block;height:0;clear:both;visibility:hidden}
#menu { margin-top:40px;height:68px;background:url(nav.gif) repeat-x}
#menu ul {width:800px;height:0;list-style:none;}
#menu ul li {float:left; width:88px;height:34px;overflow:hidden;padding:0 2px 0 0;font: bold 12px/34px Arial;text-align:center;}
#menu ul li a {float:left; display:block; width:88px; height:34px;background:url(nav.gif) no-repeat left -68px;color:#fff;text-decoration:none;}
#menu ul li a.hover {clear:both; color:#222;background-position:0 -102px;}
#menu ul li.on a { color:#222;background-position:0 -102px;}

3，设置“首页”初始状态的背景样式

按照下面的步骤做即可

内容------> 栏目管理 -------> 编辑栏目（选择首页管理选项中的）------> 自设选项 ------->

在自设选项内容1中添加：class="on"

4，制作导航背景

自己制作吧，我就够懒惰的了，这个背景自己都不做那就别做网站了。

5，更新缓存，漂亮动感的导航条呈现在你的面前了。

一共发出来2种颜色的背景，黑色的背景图省事就没有做全，不过可以参照第一个蓝色的背景做。

这个导航可以延伸做出来更漂亮的二级导航，有兴趣的朋友自己研究吧。

只希望能给新接触科讯的朋友带来一点点的提示，我刚刚接触科讯的时候非常的迷茫不知所措，用过之后才发现不错，很好用很简单。

有课程找生源就上科汛课堂街