实现侧边导航栏效果,导航栏一共含有三级目录,点击父标题可上下收展其他子标题,记录自己用过的一种写法,主要用jQuery实现。
实现效果图:
具体代码如下:
HTML布局
<div class="content">
<div class="content_left">
<div class="left_title">
LOGO
</div>
<!-- 每一个菜单项 -->
<div class="menu">
<div class="menu-title">一级菜单</div>
<ul class="menu-content">
<li class="two">二级菜单</li >
<ul class="menu-content-third">
<li>三级菜单</li>
<li>三级菜单</li>
<li>三级菜单</li>
</ul>
<li >二级菜单</li>
<li >二级菜单</li>
</ul>
</div>
<div class="menu">
<div class="menu-title">一级菜单</div>
<ul class="menu-content">
<li >二级菜单</li>
<li >二级菜单</li>
<li >二级菜单</li>
</ul>
</div>
</div>
<div class="content_right"> 内容区域 </div>
</div>
CSS样式
*{
padding: 0;
margin: 0;
cursor: default;
}
li{
list-style: none;
}
.content{
width: 100%;
height: 100%;
}
.content_left{
width: 19%;
height: 600px;
border: 1px solid #000000;
float: left;
}
.content_right{
width: 80.8%;
height: 600px;
background-color: antiquewhite;
float: right;
}
.left_title{
height: 50px;
width: 100%;
text-align: center;
line-height: 50px;
background-color: aquamarine;
}
.menu{
width: 100%;
text-align: center;
}
.menu-title{
height: 25px;
margin-right: 40px;
cursor: pointer;
}
.content-content{
display: block;
}
.menu-content li:hover{
background-color: azure;
cursor: pointer;
}
.menu-content-third{
margin-left: 40px;
display:none;
}
jQuery代码
$(function(){
//第一步,隐藏子菜单项//找到每一个菜单项,用each循环
$(".menu").each(function(){
$(this).children(".menu-content").hide();
});
//给所有的主标题添加点击事件
$(".menu-title").each(function(){
$(this).click(function(){
//弹出当前主标题下的子标题列表
var mList=$(this).parents(".menu").children(".menu-content");
//展开、收起导航栏
mList.slideToggle();
});
});
//找到二级标签,给他注册点击事件,收展它下面的三级标题组
$(".two").click(function(){
$(".two").next().slideToggle();
});
})