导航栏下拉菜单代码jQuery（导航下拉菜单怎么写）
本文目录一览：
- 1、这个导航栏的效果怎么用jQuery做出来的？我怎么也做不出来了
- 2、请问怎样做导航栏的下拉菜单？
- 3、jquery实现垂直和水平菜单导航栏
- 4、用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
楼主，找到更好的 告诉一下 。
请问怎样做导航栏的下拉菜单？
一般来讲实现导航栏指定是采用绝对定位的方式。示例代码如下：
div class="71f4-d7dc-9b51-755d nav"这里是导航所在的DIV容器。/div
CSS代码：
.nav{
position:fixed; /* 绝对定位，fixed是相对于浏览器窗口定位。 */
top:0; /* 距离窗口顶部距离 */
left:0; /* 距离窗口左边的距离 */
width:100%; /* 宽度设置为100% */
height:40px; /* 高度 */
z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
}
设置方式，原理及大致内容请看css代码注释。
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="d7dc-9b51-755d-be60 content"
li
class="9b51-755d-be60-4d8f main"a
href="#"菜单
1/a
ul
class="755d-be60-4d8f-886f child"
li菜单1.1/li
li菜单1.2/li
li菜单1.3/li
/ul
/li
li
class="be60-4d8f-886f-1108 main"a
href="#"菜单
2/a
ul
class="4d8f-886f-1108-dced child"
li菜单2.1/li
li菜单2.2/li
li菜单2.3/li
li菜单2.4/li
/ul
/li
li
class="886f-1108-dced-b7c9 main"a
href="#"菜单
3/a
ul
class="1108-dced-b7c9-a36c child"
li菜单3.1/li
li菜单3.2/li
li菜单3.3/li
/ul
/li
li
class="dced-b7c9-a36c-8768 main"a
href="#"菜单
4/a
ul
class="b7c9-a36c-8768-97f3 child"
li菜单4.1/li
li菜单4.3/li
/ul
/li
li
class="a36c-8768-97f3-2e19 main"a
href="#"菜单
5/a
ul
class="ec53-9214-ba65-9911 child"
li菜单5.1/li
li菜单5.2/li
/ul
/li
/ul
!--水平导航栏--
ul
class="9214-ba65-9911-71f4 content"
li
class="ba65-9911-71f4-d7dc hmain"a
href="#"菜单
1/a
ul
class="9911-71f4-d7dc-9b51 child"
li菜单1.1/li
li菜单1.2/li
li菜单1.3/li
/ul
/li
li
class="71f4-d7dc-9b51-755d hmain"a
href="#"菜单
2/a
ul
class="d7dc-9b51-755d-be60 child"
li菜单2.1/li
li菜单2.2/li
li菜单2.3/li
li菜单2.4/li
/ul
/li
li
class="9b51-755d-be60-4d8f hmain"a
href="#"菜单
3/a
ul
class="755d-be60-4d8f-886f child"
li菜单3.1/li
li菜单3.2/li
li菜单3.3/li
/ul
/li
li
class="be60-4d8f-886f-1108 hmain"a
href="#"菜单
4/a
ul
class="4d8f-886f-1108-dced child"
li菜单4.1/li
li菜单4.3/li
/ul
/li
li
class="886f-1108-dced-b7c9 hmain"a
href="#"菜单
5/a
ul
class="1108-dced-b7c9-a36c 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;}
