上一篇文章左側(cè)菜單欄折疊展開效果-超級簡單介紹了將菜單列表上下展開的效果荐糜，這里在上一篇文章的基礎(chǔ)上增加了左右折疊展開，有時候左側(cè)菜單可能占了屏幕的一部分寬度暮蹂，我們想把左側(cè)菜單欄收縮起來以此讓右邊可視區(qū)域變大链患，就可以參考這篇文章的效果啦馁筐。效果圖如下：
一：頁面結(jié)構(gòu)：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="window-left">
<div class="go-back">
<a href="javascript:;">
<i class="i-icon"></i>
</a>
</div>
<div class="menu-list">
<ul>
<li class="first-menu">
<a href="javascript:;"><i class="i-icon"></i></a>
<span class="hover-tit">首頁</span>
</li>
<li class="first-menu">
<a href="javascript:;"><i class="i-icon"></i></a>
<span class="hover-tit">菜單1</span>
<ul>
<li class="second-menu">
<a href="javascript:;">子菜單1-1</a>
</li>
<li class="second-menu">
<a href="javascript:;">子菜單1-2</a>
</li>
<li class="second-menu">
<a href="javascript:;">子菜單1-3</a>
</li>
<li class="second-menu">
<a href="javascript:;">子菜單1-4</a>
</li>
</ul>
</li>
<li class="first-menu">
<a href="javascript:;"><i class="i-icon"></i></a>
<span class="hover-tit">菜單2</span>
<ul>
<li class="second-menu">
<a href="javascript:;">子菜單2-1</a>
</li>
<li class="second-menu">
<a href="javascript:;">子菜單2-2</a>
</li>
<li class="second-menu">
<a href="javascript:;">子菜單2-3</a>
</li>
</ul>
</li>
<li class="first-menu">
<a href="javascript:;"><i class="i-icon"></i></a>
<span class="hover-tit">菜單3</span>
<ul>
<li class="second-menu">
<a href="javascript:;">子菜單3-1</a>
</li>
<li class="second-menu">
<a href="javascript:;">子菜單3-2</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
二：頁面樣式css，放在head標(biāo)簽里
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html,body{
height: 100%;
}
a, a:hover, a:focus {
text-decoration: none;
color: #262626;
}
.i-icon{
display: inline-block;
}
.go-back{
padding-top: 50px;
text-align: center;
}
.window-left.fold{
overflow: visible!important;
}
.window-left{
position:relative;
float:left;
width:200px;
height:100%;
overflow: hidden;
background-color: #e8e9ec;
}
.window-left.fold{
overflow: visible!important;
}
.window-left .go-back a{
display: inline-block;
width: 160px;
height: 30px;
line-height: 30px;
border-radius: 15px;
border: solid 1px #7e84b1;
text-align: center;
}
.window-left .go-back a .i-icon{
width: 30px;
height: 30px;
margin: 0 auto;
background-image: url("image/left-arrow.png");
}
.window-left.fold .go-back a{
width: 30px;
height: 30px;
border-radius: 15px;
border: solid 1px #7e84b1;
}
.window-left.fold .go-back a .i-icon{
background-image: url("image/right-arrow.png");
}
.window-left .go-back{
text-align: center;
}
.window-left .menu-list{
padding-top:20px;
font-size:18px;
}
.window-left .menu-list ul{
list-style: none;
padding:0;
margin:0 auto;
}
.window-left .menu-list ul li{
text-align:left;
color: #616c82;
}
.window-left .menu-list ul li.first-menu{
position: relative;
color: #5f78a2;
}
.window-left .menu-list>ul>li .i-icon{
width: 24px;
height: 24px;
vertical-align: sub;
background-image: url("image/menu.png");
}
.window-left .menu-list ul li:HOVER>span{
color: #1c9dff;
cursor: pointer;
}
.window-left .menu-list ul li a{
display:block;
}
.window-left .menu-list ul li.first-menu>a{
position: relative;
padding-left: 15px;
width: 100%;
line-height: 50px;
white-space: nowrap;
}
.window-left .menu-list ul li.first-menu .hover-tit{
display: block;
position: absolute;
left: 55px;
top:13px;
width: 140px;
}
.window-left.fold .menu-list ul li.first-menu .hover-tit{
display: none;
width: 180px;
height: 50px;
left: 60px;
line-height: 50px;
padding-left: 20px;
background-color: #bfbcbc;
color: #646567;
cursor: Default;
}
.window-left.fold .menu-list ul li.first-menu:hover{
background-color: #bfbcbc;
}
.window-left.fold .menu-list ul li.first-menu:hover .hover-tit{
display: block!important;
top:0;
}
.window-left.fold .menu-list ul li.first-menu:hover ul{
display: block!important;
position: absolute;
width: 180px;
top:50px;
left: 60px;
}
.window-left.fold .menu-list ul li.first-menu:hover ul li{
height: 45px;
border-top: 1px solid #35395f;
background-color: #bfbcbc;
}
.window-left.fold .menu-list ul li.first-menu:hover ul li a{
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.window-left .menu-list ul li.first-menu.active>span{
color: #1c9dff;
}
.window-left .menu-list ul li.first-menu.active ul li.second-menu.current a{
background-color: #bfbcbc;;
border-left: 4px solid #101213;
font-size: 16px;
}
.window-left .menu-list ul li.first-menu ul{
display:none;
}
.window-left .menu-list ul li.first-menu ul li.second-menu a{
padding: 12px 0 12px 55px;
font-size:16px;
color: #28292b;
}
.window-left.fold .menu-list ul li.first-menu ul li.second-menu a{
padding-left: 20px;
font-size:16px;
color: #020e23;
}
</style>
三：js代碼：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(function(){
$(".menu-list .first-menu").click(function(){
$(this).addClass("active").siblings().removeClass("active");
if(!$(".window-left").hasClass('fold')){
$(this).find("ul").slideToggle(500);
$(this).siblings().find("ul").hide();
}
})
$(".menu-list .second-menu").click(function(){
var $this = $(this);
$(".second-menu").each(function () {
if($(this).hasClass("current")){
$(this).removeClass("current");
}
})
$this.addClass("current").siblings().removeClass("current");
$this.parents(".first-menu").addClass("active").siblings().removeClass("active")
})
/*阻止事件冒泡*/
$(".menu-list .first-menu ul").bind("click",function(event){
event.stopPropagation();
});
$(".go-back a").click(function () {
$(".menu-list .first-menu").find("ul").hide();
//收起狀態(tài)
if($(".window-left").hasClass('fold')){
$(".window-left").animate({width:"200px"},300,'swing');
$(".window-left").removeClass('fold');
}else{
$(".window-left").animate({width:"60px"},300,'swing');
$(".window-left").addClass('fold')
}
})
})
</script>
關(guān)于菜單折疊收起綁定事件有不明白的可以參考上一篇文章舟陆，這里寫了兩套樣式误澳，因為展開狀態(tài)和折疊狀態(tài)下子菜單的位置及樣式不一樣，所以當(dāng)我們點擊展開折疊圖標(biāo)時添加移除元素類名就可以吨娜，并且添加菜單欄展開和折疊寬度變化時的動畫脓匿，采用jquery的animate方法。
原文作者技術(shù)博客：http://www.reibang.com/u/ac4daaeecdfe
95后前端妹子一枚宦赠，愛閱讀陪毡，愛交友，將工作中遇到的問題記錄在這里勾扭，希望給每一個看到的你能帶來一點幫助毡琉。
歡迎留言交流
