三级菜单

最新推荐文章于 2018-11-04 23:51:00 发布

前端渣渣

最新推荐文章于 2018-11-04 23:51:00 发布

阅读量492

点赞数

文章标签： css html js 三级菜单

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>二级菜单</title>
<script src="js/jquery-2.0.0.min.js"></script>
<style>
#left_nav{
width:237px;
background-color:#000;
}
#left_nav ul{
width:240px;
list-style:none;
margin:0;
padding:0;
}
#left_nav ul li{
width:237px;
float:left;
display:block;
}
.nav_a,.nav_a_f{
width:202px;
display:block;
font-family:"黑体";
font-size:1.8em;
line-height:60px;
color:#fff;
text-decoration:none;
padding-left:35px;
}
.nav_a:hover,.nav_a_f:hover{
width:202px;
line-height:60px;
color:#fff;
border:2px solid #999;
}
/*.nav_a_f.active{
color:#fff;
display:block;
background-color:#999;
}*/
.nav_img_01,.nav_img_02{
float:right;
font-family:"黑体";
font-size:1.8em;
font-weight:bold;
color:#fff;
margin:-40px 3% 0 0;
border:0;
vertical-align:top;
cursor:pointer;
}
.nav_ul,.nav_li_ul{
width:237px;
height:auto;
float:left;
display:none;
background-color:#2f384c;
}
#leftn ul li ul li{
width:237px;
float:left;
display:block;
}
#nav_li,.nav_li{
width:192px;
display:block;
color:#869fb1;
font-family:"宋体";
font-size:1.8em;
line-height:60px;
background-color:#2f384c;
padding-left:45px;
text-decoration:none;
}
#nav_li_a{
width:182px;
display:block;
color:#0099cc;
font-family:"宋体";
font-size:1.6em;
line-height:60px;
background-color:#2f384c;
padding-left:55px;
text-decoration:none;
}
#nav_li:hover,.nav_li:hover{
width:192px;
line-height:60px;
color:#fff;
border:2px solid #999;
}
#nav_li_a:hover{
width:182px;
line-height:60px;
color:#fff;
border:2px solid #999;
}
#nav_li_a.active{
width:182px;
line-height:60px;
color:#fff;
border-left:2px solid #006699;
background-color:#2b303b;
}
#nav_li.active{
width:192px;
height:60px;
color:#fff;
border-left:2px solid #006699;
background-color:#2b303b;
}
</style>
<script>
$(document).ready(function() {
//绑定元素点击事件
$("#left_nav ul li,#left_nav ul li ul li").click(function() {
//判断对象是显示还是隐藏
if($(this).children(".nav_ul,.nav_li_ul").is(":hidden")){
//表示隐藏
if(!$(this).children(".nav_ul,.nav_li_ul").is(":animated")) {
$(this).children(".nav_img_01,.nav_img_02").css({'transform':'rotate(90deg)'});
//如果当前没有进行动画，则添加新动画
$(this).children(".nav_ul,.nav_li_ul").animate({
height: 'show'
}, 1000)
//siblings遍历div1的元素
.end().siblings().find(".nav_ul,.nav_li_ul").hide(1000);
}
} else {
//表示显示
if(!$(this).children(".nav_ul,.nav_li_ul").is(":animated")) {
$(this).children(".nav_img_01,.nav_img_02").css({'transform':'rotate(360deg)'});
$(this).children(".nav_ul,.nav_li_ul").animate({
height: 'hide'
}, 1000)
.end().siblings().find(".nav_ul,.nav_li_ul").hide(1000);
}
}
});

//阻止事件冒泡，子元素不再继承父元素的点击事件
$('.nav_ul,.nav_li_ul').click(function(e){
e.stopPropagation();
});

//点击子菜单为子菜单添加样式，并移除所有其他子菜单样式
$("#left_nav ul li .nav_ul .nav_li").click(function() {
//设置当前菜单为选中状态的样式，并移除同类同级别的其他元素的样式
$(this).addClass("removes").siblings().removeClass("removes");
//遍历获取所有父菜单元素
$(".nav_ul,.nav_li_ul").each(function(){
//判断当前的父菜单是否是隐藏状态
if($(this).is(":hidden")){
//如果是隐藏状态则移除其样式
$(this).children(".nav_li").removeClass("removes");
}
});
});
});
</script>
</head>
<body>
<div id="left_nav">
<ul>
<li><a class="nav_a_f" href="#">首页</a></li>
<li><a class="nav_a_f" href="#">用户管理</a></li>
<li><a class="nav_a" href="#">公司管理</a>
<span class="nav_img_01">></span>
<ul class="nav_ul">
<li><a id="nav_li" href="three_dsh.html">待审核</a></li>
<li><a id="nav_li" href="#">创建公司</a></li>
<li><a class="nav_li" href="#">正常使用</a>
<span class="nav_img_02">></span>
<ul class="nav_li_ul">
<li><a class="active" id="nav_li_a" href="#">公司信息</a></li>
<li><a id="nav_li_a" href="#">老板信息</a></li>
<li><a id="nav_li_a" href="#">公司员工</a></li>
<li><a id="nav_li_a" href="#">操作记录</a></li>
</ul>
</li>
<li><a id="nav_li" href="#">已冻结</a></li>
<li><a id="nav_li" href="#">账号管理</a></li>
</ul>
</li>
<li><a class="nav_a" href="#">重要操作记录</a>
<span class="nav_img_01">></span>
<ul class="nav_ul">
<li><a id="nav_li" href="#">审核记录</a></li>
<li><a id="nav_li" href="#">删除记录</a></li>
<li><a id="nav_li" href="#">下载记录</a></li>
<li><a id="nav_li" href="#">操作记录</a></li>
</ul>
</li>
<li><a class="nav_a_f" href="#">系统设置</a></li>
<li><a class="nav_a_f" href="#">数据统计与分析</a></li>
</ul>
</div>
</body>

</html>