请选择 进入手机版 | 继续访问电脑版

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz

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

2014-3-30 11:21| 发布者: admin| 查看: 7691| 评论: 2|原作者: 朱朝兵|来自: DZ起点网

摘要: 3-2 Discuz制作jquery导航滑动效果 关于导航的jquery效果,我们已经为大家制作好了!大家只需前往我们的资源去下载即可! 本讲中要用到的资源地址:http://www.dz7.com.cn/discuz-77-1-1.html 第一步:首先将 ...

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

第三章 网站头部制作

主讲老师:朱朝兵  QQ5370607563-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模板代码:

替换为:

Discuz模板代码:



3

路过

雷人

握手

鲜花

鸡蛋

相关阅读

发表评论

最新评论

引用 fulibao 2015-4-19 00:13
无法使用啊
引用 puregold 2014-12-25 15:25
<script src="$_G['style'][styleimgdir/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="$_G['style'][styleimgdir/jquery.plugins.js" type="text/javascript"></script>脚本错误,改为下:
<script src="$_G['style']['styleimgdir']/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="$_G['style']['styleimgdir']/jquery.plugins.js" type="text/javascript"></script>

查看全部评论(2)

QQ|Archiver|手机版|小黑屋|Discuz代码分析|Discuz目录结构|DZ起点网 ( 蜀ICP备13000518号-15 )

GMT+8, 2024-3-29 04:49 , Processed in 0.038794 second(s), 19 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

返回顶部