文单阅读

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>admin左侧边栏多级菜单</title>
</head>

<!--图标样式-->
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">

<style>
    html body {
  font-size: 16px;
  font-family: "寰蒋闆呴粦";
  color: #FFFFFF;
}
i {
  color: #FFFFFF;
  font-size: 12px;
}
a {
  text-decoration: none;
  color: #FFFFFF;
}
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
/*娓呴櫎娴姩*/
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
  /*IE/7/6*/
}
/*瀹氫綅灞呬腑*/
.middle {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.s-side {
  min-width: 200px;
  position: fixed;
  top: 0;
  left: 0;
  width: 15%;
  bottom: 0;
  background-color: #292929;
  box-shadow: 0px 0px 10px #313131;
  padding: 10px;
}
.s-side .s-firstItem i {
  font-size: 20px;
}
.s-side .s-firstItem span {
  display: inline-block;
  margin-left: 10px;
  font-size: 20px;
  text-shadow: 0px 0px 5px #EEEEEE;
  white-space: 10px;
}
.s-side .first {
    padding: 10px 0px;
    border-bottom: 1px solid #424242;
}
.s-side .d-firstNav span {
  display: inline-block;
  margin-left: 10px;
}
.s-side .d-firstNav i.fr {
  font-size: 25px;
}
.s-side .s-secondNav,
.s-side .s-secondItem {
  margin-left: 50px;
  margin-top: 10px;
}
.s-secondNav:hover,.d-firstNav:hover{
    background-color: #3D3D3D;cursor: pointer
}
.s-side .d-secondDrop {
  margin-left: 100px;
  margin-top: 10px;
}
.iconRotate {
  transform: rotate(90deg);
  transition: transform 0.5s;
}
.s-firstDrop,
.s-secondDrop {
  display: none;
}
</style>

<body>

<div class="s-side">
    <ul>
        <!--这部分是导航栏信息。-->
        <li class="s-firstItem first">
            <a href="#">
                <i class="fa fa-home"></i>
                <span>首页</span>
            </a>
        </li>
        
        <li class="first">
            <div class="clearfix d-firstNav s-firstNav">
                <i class="fa fa-bars"></i>
                <span>一级菜单</span>
                <i class="fa fa-caret-right fr "></i>
            </div>
            <ul class="d-firstDrop s-firstDrop">
                <li>
                    <div class="d-secondNav s-secondNav">
                        <i class="fa fa-minus-square-o"></i>
                        <span>二级菜单</span>
                        <i class="fa fa-caret-right fr"></i>
                    </div>
                    <ul class="d-secondDrop s-secondDrop">
                        <li class="s-thirdItem">
                            <a href="#">三级导航</a>
                        </li>
                        <li class="s-thirdItem">
                            <a href="#">三级导航</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="d-secondNav s-secondNav">
                        <i class="fa fa-minus-square-o"></i>
                        <span>二级菜单</span>
                        <i class="fa fa-caret-right fr "></i>
                    </div>
                    <ul class="d-secondDrop s-secondDrop">
                        <li class="s-thirdItem">
                            <a href="#">三级导航</a>
                        </li>
                    </ul>
                </li>
                <li class="s-secondItem">
                    <a href="#">
                        <i class="fa fa-minus-square-o"></i>
                        <span>二级导航</span>
                    </a>
                </li>
            </ul>
        </li>
        <li class="first">
            <div class="d-firstNav s-firstNav">
                <i class="fa fa-bars"></i>                      
                <span>一级菜单</span>
                <i class="fa fa-caret-right fr" ></i>
            </div>
            <ul class="d-firstDrop s-firstDrop">
                <li class="s-secondItem">
                    <i class="fa fa-minus-square-o"></i>
                    <a href="#">二级导航</a>
                </li>
                <li class="s-secondItem">
                    <i class="fa fa-minus-square-o"></i>
                    <a href="#">二级导航</a>
                </li>
            </ul>
        </li>
    </ul>
</div>
    
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(function() {
    $('.d-firstNav').click(function(e) {
        console.log("111");
        dropSwift($(this), '.d-firstDrop');    
        e.stopPropagation();
    });
    $('.d-secondNav').click(function(e) {
        dropSwift($(this), '.d-secondDrop');
        e.stopPropagation();
    });
    
    
    
    /**
     * @param dom   鐐瑰嚮鐨勫綋鍓嶅厓绱�
     * @param drop  涓嬩竴绾ц彍鍗�
     */
    function dropSwift(dom, drop) {
        //鐐瑰嚮褰撳墠鍏冪礌锛屾敹璧锋垨鑰呬几灞曚笅涓€绾ц彍鍗�
        
        
        dom.next().slideToggle();
        
        //璁剧疆鏃嬭浆鏁堟灉
        
        //1.灏嗘墍鏈夌殑鍏冪礌閮借嚦涓哄垵濮嬬殑鐘舵€�      
        dom.parent().siblings().find('.fa-caret-right').removeClass('iconRotate');
        
        //2.鐐瑰嚮璇ュ眰锛屽皢鍏朵粬鏄剧ず鐨勪笅婊戝眰闅愯棌        
        dom.parent().siblings().find(drop).slideUp();
        
        var iconChevron = dom.find('.fa-caret-right');
        if(iconChevron.hasClass('iconRotate')) {            
            iconChevron.removeClass('iconRotate');
        } else {
            iconChevron.addClass('iconRotate');
        }
    }
})
</script>

</body> 
</html>
admin左侧边栏多级菜单