您的位置：首页 > Web前端 > JQuery

jquery纵向抽屉式导航栏

2015-12-03 11:50 507 查看

<!DOCTYPE html>
<html>
<head>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$(".Menu h3").click(function () {
if ($(this).next("ul").css("display") == "block")
$(this).next("ul").slideUp();
else {
var uls = $(this).parent().children("ul");
uls.slideUp();
$(this).next("ul").slideDown();
}
});
});
</script>
<style type="text/css">
.hamburgermenu {
background: none repeat scroll 0 0 #373737;
box-shadow: 3px 0 7px rgba(0, 0, 0, 0.55);
height: 100%;
overflow: hidden;
width:150px;
}
.Menu {
text-align: center;
width: 100%;
}

.Menu h3 {
cursor: pointer;
margin: 0;
color: #ccc;
padding: 14px 8px;
text-align: center;
text-decoration: none;
}

.Menu h3:hover {
background-color: #2c2c2c;
color: #fff;
}

.Menu ul {
list-style-type: none;
margin: 0;
padding: 0;
display: none;
background-color: #222;
}

.Menu ul li {
font: 13px/31px "Microsoft YaHei";
height: 31px;
}

.Menu a {
text-decoration: none;
color: #fff;
}
}
</style>
</head>
<body>
<div class="hamburgermenu">
<div class="Menu">
<h3>菜单一</h3>
<ul>
<li>
<a href="javascript:void(0)">子菜单一</a>
</li>
<li>
<a href="javascript:void(0)">子菜单二</a>
</li>
</ul>
<h3>菜单二</h3>
<ul>
<li>
<a href="javascript:void(0)">子菜单一</a>
</li>
<li>
<a href="javascript:void(0)">子菜单二</a>
</li>
</ul>
<h3>菜单三</h3>
<ul>
<li>
<a href="javascript:void(0)">子菜单一</a>
</li>
<li>
<a href="javascript:void(0)">子菜单二</a>
</li>
</ul>
<h3>菜单四</h3>
<ul>
<li>
<a href="javascript:void(0)">子菜单一</a>
</li>
<li>
<a href="javascript:void(0)">子菜单二</a>
</li>
</ul>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航