<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>竖排三级菜单导航</title>
<style type="text/css">
html body{font-size:16px;font-family:微软雅黑;color:#fff}
i{color:#fff;font-size:12px}
a{text-decoration:none;color:#fff}
*{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}
.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:0 0 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:0 0 5px #eee;white-space:10px}
.s-side .first{padding:10px 0;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 .5s}
.s-firstDrop,.s-secondDrop{display:none}
</style>
<style type="text/javascript">
$(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();
});
function dropSwift(dom, drop) {
dom.next().slideToggle();
dom.parent().siblings().find('.fa-caret-right').removeClass('iconRotate');
dom.parent().siblings().find(drop).slideUp();
var iconChevron = dom.find('.fa-caret-right');
if (iconChevron.hasClass('iconRotate')) {
iconChevron.removeClass('iconRotate');
} else {
iconChevron.addClass('iconRotate');
}
}
})
</style>
</head>
<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="d-firstNav s-firstNav clearfix"> <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>
</body>
<script src="/jquery.js"></script>
</html>
