jquery导航菜单特效代码（jquery实现导航栏）

本篇文章给大家谈谈jquery导航菜单特效代码，以及jquery实现导航栏对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、这个导航栏的效果怎么用jQuery做出来的？我怎么也做不出来了
• 2、jquery实现垂直和水平菜单导航栏
• 3、用jquery来设置网页导航栏向下滚动时隐藏，向上滚动时显示的代码
• 4、简单易懂的jQuery导航(三级菜单)源码
• 5、jQuery实现两款有动画功能的导航菜单代码

这个导航栏的效果怎么用jQuery做出来的？我怎么也做不出来了

跟楼主一样也在找这个效果，找到一个叫NAV.JS，可以实现。你去百度一下NAV.JS。 还有一种是supersild插件实现，去下载一个supersild.js

script type="text/javascript"

jQuery(".xnav").slide({

type:"menu", //效果类型

titCell:".m", // 鼠标触发对象

targetCell:".sub", // 效果对象，必须被titCell包含

delayTime:0, // 效果时间

triggerTime:0,//鼠标延迟触发时间

defaultIndex:mindex

//returnDefault:false //返回默认状态

});

/script

以上代码可以插在底部（为了避免冲突）

这个代码要插在顶部 用js可以在静态页面里也实现。

script

var mindex =0;//定义菜单menu

/script

楼主，找到更好的 告诉一下 。

jquery实现垂直和水平菜单导航栏

本文实例为大家分享了jquery菜单导航栏的实现代码，供大家参考，具体内容如下

1.

HTML代码

!DOCTYPE

html

html

head

meta

charset="UTF-8"

title竖直导航菜单/title

link

href="css/Vmenu.css"

rel="stylesheet"

/

script

src="js/jquery-2.1.4.min.js"/script

script

$(function(){

//垂直导航栏，点击下拉子菜单

$(".maina").click(function(){

$(this).next().slideToggle(500)

.parent().siblings().find(".child").slideUp(500);

})

//水平导航栏，鼠标经过下拉导航栏

$(".hmain").hover(function(){

$(this).find(".child").slideToggle(500)

.parent().siblings().find(".child").slideUp();

})

})

/script

/head

body

!--垂直导航栏--

ul

class="content"

li

class="main"a

href="#"菜单

1/a

ul

class="child"

li菜单1.1/li

li菜单1.2/li

li菜单1.3/li

/ul

/li

li

class="main"a

href="#"菜单

2/a

ul

class="child"

li菜单2.1/li

li菜单2.2/li

li菜单2.3/li

li菜单2.4/li

/ul

/li

li

class="main"a

href="#"菜单

3/a

ul

class="child"

li菜单3.1/li

li菜单3.2/li

li菜单3.3/li

/ul

/li

li

class="main"a

href="#"菜单

4/a

ul

class="child"

li菜单4.1/li

li菜单4.3/li

/ul

/li

li

class="main"a

href="#"菜单

5/a

ul

class="child"

li菜单5.1/li

li菜单5.2/li

/ul

/li

/ul

!--水平导航栏--

ul

class="content"

li

class="hmain"a

href="#"菜单

1/a

ul

class="child"

li菜单1.1/li

li菜单1.2/li

li菜单1.3/li

/ul

/li

li

class="hmain"a

href="#"菜单

2/a

ul

class="child"

li菜单2.1/li

li菜单2.2/li

li菜单2.3/li

li菜单2.4/li

/ul

/li

li

class="hmain"a

href="#"菜单

3/a

ul

class="child"

li菜单3.1/li

li菜单3.2/li

li菜单3.3/li

/ul

/li

li

class="hmain"a

href="#"菜单

4/a

ul

class="child"

li菜单4.1/li

li菜单4.3/li

/ul

/li

li

class="hmain"a

href="#"菜单

5/a

ul

class="child"

li菜单5.1/li

li菜单5.2/li

/ul

/li

/ul

/body

/html

2.

CSS代码

*{

margin:

0px;

padding:

0px;

}

.content{

margin:

40px

100px;

float:

left;

}

ul

,li{

list-style:

none;

}

.main,.hmain{

width:

150px;

background:

#222;

font-size:

16px;

text-align:

center;

cursor:

pointer;

line-height:

40px;

color:

white;

}

.maina,.hmaina{

text-decoration:

none;

color:

white;

display:

inline-block;

width:

150px;

min-height:

40px;

}

.main:hover,.hmain:hover{

background:

black;

}

.child{

background:

#444;

display:none;

}

.child

li:hover{

background:

#333333;

}

/*垂直导航栏左浮动*/

.hmain{

float:

left;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

用jquery来设置网页导航栏向下滚动时隐藏，向上滚动时显示的代码

script type="text/javascript" src=""/script

script

    (function() {

    new Headroom(document.querySelector("#nav-scroll"), { //这里的nav-scroll改为你的导航栏的id或class

        offset : 5, // 在元素没有固定之前，垂直方向的偏移量（以px为单位）

            tolerance: 5, // scroll tolerance in px before state changes        

        classes: {

            initial: "animated",  // 当元素初始化后所设置的class

            pinned: "slideUp", // 向上滚动时设置的class

            unpinned: "slideDown" // 向下滚动时所设置的class

        }

    }).init();    

    }());

/script

然后，加上样式就可以了：

.animated {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}

.animated .slideDown {top: -100px;}

.animated .slideUp {top: 0;}

简单易懂的jQuery导航(三级菜单)源码

!-- 三级操蛋导航 --

div class="nav_left"

div class="nav_leftlist"

h2b/b用户系统/h2

dl

dtb/b用户管理/dt

dd

a class="cur" href=""商户信息b/b/a

a href=""用户信息b/b/a

/dd

/dl

/div

div class="nav_leftlist"

h2b/b财务系统/h2

dl

dtb/b系统账务/dt

dd

a href=""平台账单b/b/a

a href=""账单明细b/b/a

/dd

/dl

dl

dtb/b商户账务/dt

dd

a href=""商户账单b/b/a

a href=""提现管理b/b/a

/dd

/dl

dl

dtb/b用户账务/dt

dd

a href=""用户账单b/b/a

a href=""提现管理b/b/a

/dd

/dl

/div

/div

style

.nav_left{background: #232b35;height: 100%;width: 220px;min-height: 600px;position: fixed;top: 100px;left: 0;}

.nav_leftlist{}

.nav_leftlist h2{height: 50px;line-height: 50px;padding-left: 40px;font-size: 16px;background: #3b444f;color: #999999;position: relative;cursor: pointer;}

.nav_leftlist h2 b{position: absolute;top: 20px;left: 13px;width: 16px;height: 9px;background: url(../images/icon04.png) no-repeat;background-position: 0 0;cursor: pointer;}

.nav_leftlist h2 b.cur{background-position: -16px 0;}

.nav_leftlist dl{}

.nav_leftlist dl dt{height: 50px;line-height: 50px;background: #2c3643;font-size: 16px;color: #ffffff;padding-left: 60px;position: relative;cursor: pointer;}

.nav_leftlist dl dt b{position: absolute;top: 20px;left: 34px;width: 16px;height: 9px;background: url(../images/icon04.png) no-repeat;background-position: 0 -10px;}

.nav_leftlist dl dt b.cur{background-position: -16px -10px;}

.nav_leftlist dl dd{}

.nav_leftlist dl dd a{display: block;height: 50px;line-height: 50px;color: #fff;padding-left: 80px;font-size: 16px;position: relative;}

.nav_leftlist dl dd a.cur{color: #ee581c;}

.nav_leftlist dl dd a.cur b{display: block;position: absolute;top: 16px;right: -1px;width: 11px;height: 18px;background: url(../images/icon04.png) no-repeat;background-position: 0 -20px;}

/style

/body

script type="text/javascript" src="../js/jquery.js" /script

script type="text/javascript" 

$(function(){

$('.nav_leftlist').on('click', 'h2', function(event) {

$(this).siblings('dl').toggle();

if($(this).siblings('dl').css('display')=='none'){

$(this).find('b').addClass('cur');

}else{

$(this).find('b').removeClass('cur');

}

});

$('.nav_leftlist').on('click', 'dl dt', function(event) {

$(this).siblings('dd').toggle();

if($(this).siblings('dd').css('display')=='none'){

$(this).find('b').addClass('cur');

}else{

$(this).find('b').removeClass('cur');

}

});

})

/script

效果图：

jQuery实现两款有动画功能的导航菜单代码

本文实例讲述了jQuery实现两款有动画功能的导航菜单代码。分享给大家供大家参考。具体如下：

这里介绍两个有动画功能的jQuery导航菜单，每个具备移动背景的效果，第二则是渐变背景效果，两个都不错，根据你的喜好选择了，菜单的风格和颜色自己修改一下就能用了。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

""

html

xmlns=""

head

meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/

title两个有动画功能的导航菜单/title

script

src="jquery-1.6.2.min.js"

type="text/javascript"/script

script

type="text/javascript"

$(function()

{

$("#test1

a").mouseover(function()

{

var

index

=

$("#test1

a").index(this);

var

width

=

$("#test1

a").width();

$("#test1

.showhover").stop().animate({left:width*index},1000);

})

$("#test2

a").mouseover(function()

{

var

index

=

$("#test2

a").index(this);

var

width

=

$("#test2

a").width();

$("#test2

.showhover").stop().animate({left:width*index,opacity:'0.6'},1000).stop(false,true).animate({opacity:'1.0'},500);

})

})

/script

style

type="text/css"

.body

{margin:10px;}

img

{border:0;}

a

{text-decoration:none;}

ul{list-style:none;

margin:0;

padding:0;}

.menu

{background:#003399;

height:25px;

width:600px;

position:relative;

overflow:hidden;}

.menu

.showmenu,

.menu

.showhover{

position:absolute;}

.menu

.showmenu

a

{float:left;

display:block;}

.menu

.showmenu

a

{font:700

12px/25px

Microsoft

YaHei;

color:#fff;

width:100px;

height:25px;

text-align:center;}

.menu

.showhover

{background:#990033;

width:100px;

height:25px;}

/style

/head

body

div

class="menu"

id="test1"

div

class="showhover"/div

div

class="showmenu"

a

href="#"网站首页/a

a

href="#"关于我们/a

a

href="#"新闻中心/a

a

href="#"产品中心/a

a

href="#"解决方案/a

a

href="#"联系我们/a

/div

/div

div

style="clear:both;height:50px;"/div

div

class="menu"

id="test2"

div

class="showhover"/div

div

class="showmenu"

a

href="#"网站首页/a

a

href="#"关于我们/a

a

href="#"新闻中心/a

a

href="#"产品中心/a

a

href="#"解决方案/a

a

href="#"联系我们/a

/div

/div

/body

/html

希望本文所述对大家的jQuery程序设计有所帮助。

jquery导航菜单特效代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于jquery实现导航栏、jquery导航菜单特效代码的信息别忘了在本站进行查找喔。