jquery伸缩导航代码（jQuery伸缩式导航菜单）

今天给各位分享jquery伸缩导航代码的知识，其中也会对jQuery伸缩式导航菜单进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、简单易懂的jQuery导航(三级菜单)源码
• 2、用jquery来设置网页导航栏向下滚动时隐藏，向上滚动时显示的代码
• 3、jquery实现垂直和水平菜单导航栏
• 4、jquery怎么写伸缩的二级导航菜单

简单易懂的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来设置网页导航栏向下滚动时隐藏，向上滚动时显示的代码

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实现垂直和水平菜单导航栏

本文实例为大家分享了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怎么写伸缩的二级导航菜单

建议楼主改一下主体结构 一级菜单 二级菜单 二级菜单 一级菜单 二级菜单 二级菜单 把一级菜单的li设置为相对定位，把二级菜单的ul设置为绝对定位并隐藏，然后在js中写 $("#menuli").hover(function(){ $(this).find("ul").show(); },function()

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