jquery垂直导航栏（jQuery导航栏）
本文目录一览：
- 1、如何用jquery来制作侧边导航栏？
- 2、jquery怎么做导航条随滚动条的滚动而滚动，不是固定的那种。
- 3、用jquery来设置网页导航栏向下滚动时隐藏，向上滚动时显示的代码
- 4、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" /
titlejQuery动画垂直折叠导航效果/title
style type="text/css"
.menu_list{width:268px;margin:0 auto;}
.menu_head{
height: 47px;
line-height: 47px;
padding-left: 38px;
font-size: 14px;
color: #525252;
cursor: pointer;
border-left: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-top: 1px solid #F1F1F1;
position: relative;
margin: 0px;
font-weight: bold;
background: #f1f1f1 url(images/pro_left.png) center right no-repeat;
}
.menu_list .current{background:#f1f1f1 url(images/pro_down.png) center right no-repeat;}
.menu_body{
line-height: 38px;
border-left: 1px solid #e1e1e1;
backguound: #fff;
border-right: 1px solid #e1e1e1;
}
.menu_body a{display:block;height:38px;line-height:38px;padding-left:38px;color:#777777;background:#fff;text-decoration:none;border-bottom:1px solid #e1e1e1;}
.menu_body a:hover{text-decoration:none;}
/style
/head
body
!-- 代码部分begin --
div id="firstpane" class="c007-c66b-a2b7-2c7d menu_list"
h3 class="c66b-a2b7-2c7d-484c menu_head current"哲学/h3
div style="display:block" class="a2b7-2c7d-484c-b970 menu_body"
a href=""科学技术哲学/a
a href="#"宗教学/a
a href="#"美学/a
a href="#"伦理学/a
a href="#"逻辑学/a
a href="#"外国哲学/a
a href="#"中国哲学/a
a href="#"马克思主义哲学/a
/div
h3 class="2c7d-484c-b970-2698 menu_head"经济学/h3
div style="display:none" class="484c-b970-2698-a532 menu_body"
a href="#"应用经济学/a
a href="#"理论经济学/a
a href="#"国民经济学/a
a href="#"区域经济学/a
a href="#"产业经济学/a
a href="#"国际贸易学/a
a href="#"劳动经济学/a
a href="#"政治经济学/a
/div
h3 class="b970-2698-a532-3840 menu_head"法学/h3
div style="display:none" class="2698-a532-3840-986a menu_body"
a href="#"马克思主义基本原理/a
a href="#"马克思主义发展史/a
a href="#"马克思主义中国化研究/a
a href="#"国外马克思主义研究/a
a href="#"思想政治教育/a
/div
h3 class="a532-3840-986a-394d menu_head"教育学/h3
div style="display:none" class="3840-986a-394d-2d7f menu_body"
a href="#"体育人文社会学/a
a href="#"体育教育训练学/a
a href="#"民族传统体育学/a
a href="#"发展与教育心理学/a
a href="#"应用心理学/a
a href="#"教育学原理/a
a href="#"课程与教学论/a
a href="#"比较教育学/a
/div
/div
script src="js/jquery.js"/script
script
$(document).ready(function(){
$("#firstpane .menu_body:eq(0)").show();
$("#firstpane h3.menu_head").click(function(){
$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().removeClass("current");
});
$("#secondpane .menu_body:eq(0)").show();
$("#secondpane h3.menu_head").mouseover(function(){
$(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().removeClass("current");
});
});
/script
!-- 代码部分end --
/body
/html
你自己引入jQuery。还有下面这两张图片啊
jquery怎么做导航条随滚动条的滚动而滚动，不是固定的那种。
这个用CSS让导航固定就可以了，
#qq {
position:fixed; /* 固定位置 ie6不支持该属性 */
top:0; /* 导航栏距离顶端为0像素 */
/*ie6下样式，加下划线表示只针对ie6 的hack (可百度 css hack百度百科)*/
_position:absolute; /* 把导航栏位置定义为绝对位置，这句是关键1 */
_top:expression(eval(document.documentElement.scrollTop)); /* 把导航栏位置放在浏览器垂直滚动条的顶端，这句是关键2 */
overflow:auto;
z-index:9999; /* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */
}
*/
用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="986a-394d-2d7f-7652 content"
li
class="394d-2d7f-7652-7d49 main"a
href="#"菜单
1/a
ul
class="f7ec-ebb2-3663-ac60 child"
li菜单1.1/li
li菜单1.2/li
li菜单1.3/li
/ul
/li
li
class="ebb2-3663-ac60-c007 main"a
href="#"菜单
2/a
ul
class="3663-ac60-c007-c66b child"
li菜单2.1/li
li菜单2.2/li
li菜单2.3/li
li菜单2.4/li
/ul
/li
li
class="ac60-c007-c66b-a2b7 main"a
href="#"菜单
3/a
ul
class="c007-c66b-a2b7-2c7d child"
li菜单3.1/li
li菜单3.2/li
li菜单3.3/li
/ul
/li
li
class="c66b-a2b7-2c7d-484c main"a
href="#"菜单
4/a
ul
class="a2b7-2c7d-484c-b970 child"
li菜单4.1/li
li菜单4.3/li
/ul
/li
li
class="2c7d-484c-b970-2698 main"a
href="#"菜单
5/a
ul
class="484c-b970-2698-a532 child"
li菜单5.1/li
li菜单5.2/li
/ul
/li
/ul
!--水平导航栏--
ul
class="b970-2698-a532-3840 content"
li
class="2698-a532-3840-986a hmain"a
href="#"菜单
1/a
ul
class="a532-3840-986a-394d child"
li菜单1.1/li
li菜单1.2/li
li菜单1.3/li
/ul
/li
li
class="3840-986a-394d-2d7f hmain"a
href="#"菜单
2/a
ul
class="986a-394d-2d7f-7652 child"
li菜单2.1/li
li菜单2.2/li
li菜单2.3/li
li菜单2.4/li
/ul
/li
li
class="394d-2d7f-7652-7d49 hmain"a
href="#"菜单
3/a
ul
class="f7ec-ebb2-3663-ac60 child"
li菜单3.1/li
li菜单3.2/li
li菜单3.3/li
/ul
/li
li
class="ebb2-3663-ac60-c007 hmain"a
href="#"菜单
4/a
ul
class="3663-ac60-c007-c66b child"
li菜单4.1/li
li菜单4.3/li
/ul
/li
li
class="ac60-c007-c66b-a2b7 hmain"a
href="#"菜单
5/a
ul
class="c007-c66b-a2b7-2c7d 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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
