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

DZ爱好者 发表于 2014-2-13 22:54:11

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

各位站长同学大家好：
本次发布的资源能呢。让discuz的导航实现一个很华丽的，具有滑动效果的导航源代码！
最终效果如演示网址：www.dvxz8.com里面的导航！这个是我们已经做好的效果！
截图效果如下（截图不能显示出滑动效果，所以尽量查看演示网站）：


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

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

下载资源：

文字版修改教程如下


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


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


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

第三步：在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模板中找到：


<div id="nv">
                                        <a href="javascript:;" id="qmenu" onmouseover="delayShow(this, function () {showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','duration':2});showForummenu($_G);})">{lang my_nav}</a>
                                        <ul>
                                                <!--{loop $_G['setting']['navs'] $nav}-->
                                                      <!--{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}class="a" {/if}$nav></li><!--{/if}-->
                                                <!--{/loop}-->
                                        </ul>
                                        <!--{hook/global_nav_extra}-->
                              </div>


替换为：


<div id="anv">
                        <div id="nav">
                                        <a href="javascript:;" id="qmenu" onmouseover="delayShow(this, function () {showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','duration':2});showForummenu($_G);})">{lang my_nav}</a>
                                        <ul>
                                                <!--{loop $_G['setting']['navs'] $nav}-->
                                                      <!--{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}class="current" {/if}$nav></li><!--{/if}-->
                                                <!--{/loop}-->
                                                
                                        </ul>
                                        <!--{hook/global_nav_extra}-->

                                        <!--引入jquery导航效果-->
                                        <script type="text/javascript">
                                       var jq = jQuery.noConflict();
                                                      jq(function() {
                                                                jq("#nav").lavaLamp({
                                                                        fx: "backout",
                                                                        speed: 700,
                                                                        click: function(event, menuItem) {
                                                                              return true
                                                                        }
                                                                })
                                                      });
                                                </script>
                        </div>
                </div>

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

学习来的 发表于 2014-3-29 12:32:49

没人顶贴么？{:soso_e179:}

技术帮助 发表于 2015-1-26 02:37:21

www168 发表于 2015-1-26 01:31
这块的怎么换成别的

请看视频教程，教程中有详细讲解颜色的更换！

www168 发表于 2015-1-26 01:31:57

这块的怎么换成别的

官方 发表于 2015-1-18 10:00:52

顶顶顶顶顶顶顶顶顶

sblpp 发表于 2014-12-20 23:26:10

谢谢分享 必须顶啊！

525919 发表于 2014-12-7 00:45:04

我终于成功了

百水 发表于 2014-10-31 13:31:52

非常感谢大大，万分感谢，哈哈

一箩筐 发表于 2014-10-9 20:07:37

extend_common.css下代码添加到什么地方呢？小白请教:$

陪你去看海 发表于 2014-9-23 21:17:59

下载了，顶一个

joechou 发表于 2014-9-22 17:39:30

Discuz导航实现JQUERY滑动效果我这边有问题，滑动的效果不能出现，同时IE7-9里提示JQUERY才错误。

Squid 发表于 2014-4-20 00:42:45

哈哈，不错不错

qma10 发表于 2014-5-26 09:58:51

不错不错:):):):):)

彭水通 发表于 2014-5-30 17:10:58

不错，支持下~~~~~~

夕阳 发表于 2014-6-1 16:29:56

看 了教程不错

23886 发表于 2014-7-21 13:25:46

不错不错，顶一个

wuyalun 发表于 2014-8-16 14:37:16

真不错 顶:):)

whwh656 发表于 2014-8-26 16:45:49

讲个太好！

明子 发表于 2014-8-27 08:45:01

珍藏了，支持支持支持

查看完整版本: Discuz导航实现JQUERY滑动效果资源下载