3-2 制作jquery滑动效果导航

《Discuz教育门户网站模板制作全套视频教程》

第三章 网站头部制作

主讲老师：朱朝兵  QQ：5370607563-2

3-2 Discuz制作jquery导航滑动效果

视频教程

高清版下载

http://pan.baidu.com/s/1mgLTW3A

效果截图

关于导航的jquery效果，我们已经为大家制作好了!大家只需前往我们的资源去下载即可！

本讲中要用到的资源地址：http://www.dz7.com.cn/discuz-77-1-1.html

第一步：首先将jquery-1.4.2.min.js、jquery.plugins.js文件上传至当前模板的扩展图片文件夹中

第二步：在 header.htm模板中引入jquery-1.4.2.min.js、jquery.plugins.js
方法如下：

Discuz模板代码：

在前加入

其中 $_G['style'][styleimgdir] 表示的discuz当前的模板的扩张图片文件夹路径

第三步：在extend_common.css样式文件中添加css样式

#anv{background:#56667F;}

#nav{position:relative;height:75px;width:1000px;padding-left:13px;overflow:hidden;margin:0 auto;}

#nav li{float:left;list-style: none;}

#nav li.back{background: #24ade8;border-bottom: 4px solid #076D97;padding-left:8px;height:71px;overflow:hidden;z-index:8;position:absolute;}

#nav li.back.left{background:url(images/main-bg.png)repeat-x;height:68px;float:right;width:8px}

#nav li a{text-decoration:none;color:#fff;font-size: 22px;z-index:10;display:block;float:left;position:relative;overflow:hidden;padding:7px 33px 0;height:75px;line-height: 75px;}

#nav li a span{cursor:pointer;display:block;}

#qmenu{font-size: 16px;background: #183A49;border-bottom: 4px solid #F1EDEA;line-height: 60px;border-top-right-radius: 0.4em;font-weight: 400;color: #FFF;height: 60px;}

然后在 header.htm模板中找到：

Discuz模板代码：

{lang my_nav}

替换为：

{lang my_nav}