jquery实现垂直和水平菜单导航栏
本文实例为大家分享了jquery菜单导航栏的实现代码，供大家参考，具体内容如下
1.HTML代码
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>竖直导航菜单</title>
<linkhref="css/Vmenu.css"rel="stylesheet"/>
<scriptsrc="js/jquery-2.1.4.min.js"></script>
<script>
$(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();
})
})
</script>
</head>
<body>
<!--垂直导航栏-->
<ulclass="content">
<liclass="main"><ahref="#">菜单1</a>
<ulclass="child">
<li>菜单1.1</li>
<li>菜单1.2</li>
<li>菜单1.3</li>
</ul>
</li>
<liclass="main"><ahref="#">菜单2</a>
<ulclass="child">
<li>菜单2.1</li>
<li>菜单2.2</li>
<li>菜单2.3</li>
<li>菜单2.4</li>
</ul>
</li>
<liclass="main"><ahref="#">菜单3</a>
<ulclass="child">
<li>菜单3.1</li>
<li>菜单3.2</li>
<li>菜单3.3</li>
</ul>
</li>
<liclass="main"><ahref="#">菜单4</a>
<ulclass="child">
<li>菜单4.1</li>
<li>菜单4.3</li>
</ul>
</li>
<liclass="main"><ahref="#">菜单5</a>
<ulclass="child">
<li>菜单5.1</li>
<li>菜单5.2</li>
</ul>
</li>
</ul>
<!--水平导航栏-->
<ulclass="content">
<liclass="hmain"><ahref="#">菜单1</a>
<ulclass="child">
<li>菜单1.1</li>
<li>菜单1.2</li>
<li>菜单1.3</li>
</ul>
</li>
<liclass="hmain"><ahref="#">菜单2</a>
<ulclass="child">
<li>菜单2.1</li>
<li>菜单2.2</li>
<li>菜单2.3</li>
<li>菜单2.4</li>
</ul>
</li>
<liclass="hmain"><ahref="#">菜单3</a>
<ulclass="child">
<li>菜单3.1</li>
<li>菜单3.2</li>
<li>菜单3.3</li>
</ul>
</li>
<liclass="hmain"><ahref="#">菜单4</a>
<ulclass="child">
<li>菜单4.1</li>
<li>菜单4.3</li>
</ul>
</li>
<liclass="hmain"><ahref="#">菜单5</a>
<ulclass="child">
<li>菜单5.1</li>
<li>菜单5.2</li>
</ul>
</li>
</ul>
</body>
</html>
2.CSS代码
*{
margin:0px;
padding:0px;
}
.content{
margin:40px100px;
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;
}
.childli:hover{
background:#333333;
}
/*垂直导航栏左浮动*/
.hmain{
float:left;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。