一款超好用的二级菜单

最新推荐文章于 2022-11-30 13:49:05 发布

前端渣渣

最新推荐文章于 2022-11-30 13:49:05 发布

阅读量648

点赞数

文章标签：二级下拉菜单 html css 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:240px;
height:600px;
background-color:#000;
}
#left_nav ul{
width:240px;
list-style:none;
margin:0;
padding:0;
}
#left_nav ul li{
width:240px;
float:left;
display:block;
text-align:center;
}
.nav_a{
text-align:center;
display:block;
font-family:"黑体";
font-size:1.2em;
line-height:60px;
color:#fff;
text-decoration:none;
}
.nav_a:hover{
width:240px;
line-height:60px;
color:#fff;
border:2px solid #999;
}
.nav_img_01{
float:right;
margin:-40px 22% 0 0;
border:0;
vertical-align:top;
}
.nav_img_02{
float:right;
margin:-40px 15% 0 0;
border:0;
vertical-align:top;
}
.nav_ul{
width:240px;
height:auto;
float:left;
display:none;
background-color:#2f384c;
cursor:pointer;
text-align: center;
}
#leftn ul li ul li{
width:240px;
float:left;
display:block;
text-align:center;
}
.nav_li{
width:240px;
display:block;
color:#869fb1;
font-family:"宋体";
font-size:1.2em;
line-height:60px;
background-color:#2f384c;
text-align:center;
cursor: pointer;
margin:0;
padding:0;
text-decoration:none;
}
.nav_li:hover{
width:240px;
line-height:60px;
color:#fff;
border:2px solid #999;
}
.removes{
width:238;
height:60px;
color: #fff !important;
border-left: 4px solid #006699;
background-color:#2b303b;
}
</style>
<script>

// JavaScript Document
$(document).ready(function() {
//绑定元素点击事件
$("#left_nav ul li").click(function() {
//判断对象是显示还是隐藏
if($(this).children(".nav_ul").is(":hidden")){
//表示隐藏
if(!$(this).children(".nav_ul").is(":animated")) {
$(this).children(".nav_img_01,.nav_img_02").css({'transform':'rotate(180deg)'});
//如果当前没有进行动画，则添加新动画
$(this).children(".nav_ul").animate({
height: 'show'
}, 1000)
//siblings遍历div1的元素
.end().siblings().find(".nav_ul").hide(1000);
}
} else {
//表示显示
if(!$(this).children(".nav_ul").is(":animated")) {
$(this).children(".nav_img_01,.nav_img_02").css({'transform':'rotate(360deg)'});
$(this).children(".nav_ul").animate({
height: 'hide'
}, 1000)
.end().siblings().find(".nav_ul").hide(1000);
}
}
});

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

//点击子菜单为子菜单添加样式，并移除所有其他子菜单样式
$("#left_nav ul li .nav_ul .nav_li").click(function() {
//设置当前菜单为选中状态的样式，并移除同类同级别的其他元素的样式
$(this).addClass("removes").siblings().removeClass("removes");
//遍历获取所有父菜单元素
$(".nav_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" href="#">首页</a></li>
<li><a class="nav_a" href="#">用户管理</a></li>
<li><a class="nav_a" href="#">公司管理</a>
<img class="nav_img_01" src="material/xiala.png">
<ul class="nav_ul">
<li><a class="nav_li" href="#">待审核</a></li>
<li><a class="nav_li" href="#">创建公司</a></li>
<li><a class="nav_li" href="#">已冻结</a></li>
<li><a class="nav_li" href="#">账号管理</a></li>
</ul>
</li>
<li><a class="nav_a" href="#">重要操作记录</a>
<img class="nav_img_02" src="material/xiala.png">
<ul class="nav_ul">
<li><a class="nav_li" href="#">审核记录</a></li>
<li><a class="nav_li" href="#">删除记录</a></li>
<li><a class="nav_li" href="#">下载记录</a></li>
<li><a class="nav_li" href="#">操作记录</a></li>
</ul>
</li>
<li><a class="nav_a" href="#">系统设置</a></li>
<li><a class="nav_a" href="#">数据统计与分析</a></li>
</ul>
</div>
</body>

</html>

前端渣渣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一款超好用的二级菜单

二级菜单#left_nav{width:240px;height:600px;background-color:#000;}#left_nav ul{width:240px;list-style:none;margin:0;padding:0;}#left_nav ul li{width:240px;float:left;disp
复制链接

扫一扫