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

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 48491|回复: 38

Discuz导航实现JQUERY滑动效果资源下载

 火... [复制链接]
发表于 2014-2-13 22:54:11 | 显示全部楼层 |阅读模式
各位站长同学大家好:
本次发布的资源能呢。让discuz的导航实现一个很华丽的,具有滑动效果的导航源代码!
最终效果如演示网址:www.dvxz8.com里面的导航!这个是我们已经做好的效果!
截图效果如下(截图不能显示出滑动效果,所以尽量查看演示网站):

Discuz滑动的Jquer导航.png

Discuz滑动的Jquer导航.png


需要修改的文件:
extend_common.css
header.htm

需要引入的文件:
jquery-1.4.2.min.js、jquery.plugins.js

下载资源: Discuz导航实现JQUERY滑动效果.zip (28.96 KB, 下载次数: 1567)

文字版修改教程如下


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


第二步:在 header.htm模板中引入jquery-1.4.2.min.js、jquery.plugins.js
方法如下:
找到:</head>并在</head>前加入:
  1. <script src="$_G['style'][styleimgdir]/jquery-1.4.2.min.js" type="text/javascript"></script>
复制代码
  1. <script src="$_G['style'][styleimgdir]/jquery.plugins.js" type="text/javascript"></script>
复制代码



其中 $_G['style'][styleimgdir] 表示的discuz当前的模板的扩张图片文件夹路径
注意引入时必须把“jquery.plugins.js”放在“jquery-1.4.2.min.js”之后引入,也就是说jquery-1.4.2.min.js必须在jquery.plugins.js的上边!

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


  1. #anv{background:#56667F;}
  2. #nav{position:relative;height:75px;width:1000px;padding-left:13px;overflow:hidden;margin:0 auto;}
  3. #nav li{float:left;list-style: none;}
  4. #nav li.back{background: #24ade8;border-bottom: 4px solid #076D97;padding-left:8px;height:71px;overflow:hidden;z-index:8;position:absolute;}
  5. #nav li.back.left{background:url(images/main-bg.png)repeat-x;height:68px;float:right;width:8px}
  6. #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;}
  7. #nav li a span{cursor:pointer;display:block;}
  8. #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模板中找到:


  1. <div id="nv">
  2.                                         <a href="javascript:;" id="qmenu" onmouseover="delayShow(this, function () {showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','duration':2});showForummenu($_G[fid]);})">{lang my_nav}</a>
  3.                                         <ul>
  4.                                                 <!--{loop $_G['setting']['navs'] $nav}-->
  5.                                                         <!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}--><li {if $mnid == $nav[navid]}class="a" {/if}$nav[nav]></li><!--{/if}-->
  6.                                                 <!--{/loop}-->
  7.                                         </ul>
  8.                                         <!--{hook/global_nav_extra}-->
  9.                                 </div>
复制代码



替换为:


  1. <div id="anv">
  2.                         <div id="nav">
  3.                                         <a href="javascript:;" id="qmenu" onmouseover="delayShow(this, function () {showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','duration':2});showForummenu($_G[fid]);})">{lang my_nav}</a>
  4.                                         <ul>
  5.                                                 <!--{loop $_G['setting']['navs'] $nav}-->
  6.                                                         <!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}--><li {if $mnid == $nav[navid]}class="current" {/if}$nav[nav]></li><!--{/if}-->
  7.                                                 <!--{/loop}-->
  8.                                                 
  9.                                         </ul>
  10.                                         <!--{hook/global_nav_extra}-->

  11.                                         <!--引入jquery导航效果-->
  12.                                         <script type="text/javascript">
  13.                                          var jq = jQuery.noConflict();
  14.                                                         jq(function() {
  15.                                                                 jq("#nav").lavaLamp({
  16.                                                                         fx: "backout",
  17.                                                                         speed: 700,
  18.                                                                         click: function(event, menuItem) {
  19.                                                                                 return true
  20.                                                                         }
  21.                                                                 })
  22.                                                         });
  23.                                                 </script>
  24.                         </div>
  25.                 </div>
复制代码


好了这个滑动导航就完成了!!!哈哈看看是不是高端大气上档次!
本资源由DZ起点网首发!转载请说明出处!DZ起点网!专注于Discuz模板制作、Discuz模板制作教程开发!

回复

使用道具 举报

发表于 2014-3-29 12:32:49 | 显示全部楼层
没人顶贴么?{:soso_e179:}
回复 1 1

使用道具 举报

发表于 2015-1-26 02:37:21 | 显示全部楼层
www168 发表于 2015-1-26 01:31
这块的怎么换成别的

请看视频教程,教程中有详细讲解颜色的更换!
回复 0 1

使用道具 举报

发表于 2015-1-26 01:31:57 | 显示全部楼层
这块的怎么换成别的 QQ截图20150125012909.png
回复 0 1

使用道具 举报

发表于 2015-1-18 10:00:52 | 显示全部楼层
顶顶顶顶顶顶顶顶顶
20120818125545_RZcNT.jpeg
回复 0 1

使用道具 举报

发表于 2014-12-20 23:26:10 | 显示全部楼层
谢谢分享 必须顶啊!
回复 0 1

使用道具 举报

发表于 2014-12-7 00:45:04 | 显示全部楼层
我终于成功了
回复 0 1

使用道具 举报

发表于 2014-10-31 13:31:52 | 显示全部楼层
非常感谢大大,万分感谢,哈哈
回复 0 1

使用道具 举报

发表于 2014-10-9 20:07:37 | 显示全部楼层
extend_common.css  下代码添加到什么地方呢?小白请教
回复 0 1

使用道具 举报

发表于 2014-9-23 21:17:59 | 显示全部楼层
下载了,顶一个
回复 0 1

使用道具 举报

发表于 2014-9-22 17:39:30 | 显示全部楼层
Discuz导航实现JQUERY滑动效果我这边有问题,滑动的效果不能出现,同时IE7-9里提示JQUERY才错误。
回复 0 1

使用道具 举报

发表于 2014-4-20 00:42:45 | 显示全部楼层
哈哈,不错不错
回复 0 1

使用道具 举报

发表于 2014-5-26 09:58:51 | 显示全部楼层
不错不错
回复

使用道具 举报

发表于 2014-5-30 17:10:58 | 显示全部楼层
不错,支持下~~~~~~
回复 0 1

使用道具 举报

发表于 2014-6-1 16:29:56 | 显示全部楼层
看 了教程不错
回复 0 1

使用道具 举报

发表于 2014-7-21 13:25:46 | 显示全部楼层
不错不错,顶一个
回复 0 1

使用道具 举报

发表于 2014-8-16 14:37:16 | 显示全部楼层
真不错 顶
回复

使用道具 举报

发表于 2014-8-26 16:45:49 | 显示全部楼层
讲个太好!
回复

使用道具 举报

发表于 2014-8-27 08:45:01 | 显示全部楼层
珍藏了,支持支持支持
回复 0 1

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-3-29 10:27 , Processed in 0.058609 second(s), 21 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表