本文实例为大家分享了jquery菜单导航栏的实现代码，供大家参考，具体内容如下
1.HTML代码
竖直导航菜单
$(function(){
//垂直导航栏，点击下拉子菜单
$(".main>a").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();
})
})
菜单 1菜单1.1菜单1.2菜单1.3菜单 2菜单2.1菜单2.2菜单2.3菜单2.4菜单 3菜单3.1菜单3.2菜单3.3菜单 4菜单4.1菜单4.3菜单 5菜单5.1菜单5.2菜单 1菜单1.1菜单1.2菜单1.3菜单 2菜单2.1菜单2.2菜单2.3菜单2.4菜单 3菜单3.1菜单3.2菜单3.3菜单 4菜单4.1菜单4.3菜单 5菜单5.1菜单5.2
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;
}
.main>a,.hmain>a{
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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
