<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简洁美观的左侧导航</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style>
body {
font:14px 微软雅黑,宋体,arial narrow,HELVETICA;
}
body,ul {
margin:0;
padding:0;
}
li {
list-style:none;
}
a {
text-decoration:none;
}
.nav {
width:220px;
height:calc(100%);
background:#263238;
transition:all .3s;
}
#mini {
border-bottom:1px solid rgba(255,255,255,.1);
}
.nav-item {
position:relative;
}
.nav a {
display:block;
overflow:hidden;
padding-left:20px;
line-height:46px;
max-height:46px;
color:#abb1b7;
transition:all .3s;
}
.nav-item>a:before {
content:"";
position:absolute;
left:0;
width:2px;
height:46px;
background:#34a0ce;
opacity:0;
transition:all .3s;
}
.nav-show,.nav-item>a:hover {
color:#fff;
background:rgba(0,0,0,.1);
}
.nav-show>a:before,.nav-item>a:hover:before {
opacity:1;
}
.my-icon {
font-size:16px;
font-style:normal;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.nav .nav-icon {
font-size:22px;
position:absolute;
margin-left:-1px;
}
.nav a span {
margin-left:30px;
}
.icon_1::after {
content:"\2648";
}
.icon_2::after {
content:"\264B";
}
.icon_3::after {
content:"\2650";
}
.nav-more {
float:right;
margin-right:20px;
font-size:18px;
transition:transform .3s;
}
.nav-item ul {
display:none;
background:rgba(0,0,0,.1);
}
.nav-mini.nav {
width:60px;
}
.nav-mini.nav .nav-item>a span {
display:none;
}
.nav-mini.nav .nav-more {
margin-right:-20px;
}
.nav-mini.nav .nav-item:hover {
background:rgba(255,255,255,.1);
}
.nav-mini.nav .nav-item:hover ul {
display:block;
}
.nav-mini.nav .nav-item ul {
position:absolute;
top:0;
left:60px;
width:180px;
z-index:99;
background:#3c474c;
overflow:hidden;
}</style>
</head>
<body>
<div id="main">
<div class="nav">
<div class="nav-top">
<div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img style="width:60px;height:60px;" src="http://www.jq22.com/img/cs/500x300-1.png"></div>
</div>
<ul>
<li class="nav-item">
<a href="javascript:;"><i class="my-icon nav-icon icon_1"></i><span>网站配置</span><i class="my-icon nav-more">></i></a>
<ul>
<li><a href="javascript:;"><span>网站设置</span></a></li>
<li><a href="javascript:;"><span>友情链接</span></a></li>
<li><a href="javascript:;"><span>分类管理</span></a></li>
<li><a href="javascript:;"><span>系统日志</span></a></li>
</ul>
</li>
<li class="nav-item">
<a href="javascript:;"><i class="my-icon nav-icon icon_2"></i><span>文章管理</span><i class="my-icon nav-more">></i></a>
<ul>
<li><a href="javascript:;"><span>站内新闻</span></a></li>
<li><a href="javascript:;"><span>站内公告</span></a></li>
<li><a href="javascript:;"><span>登录日志</span></a></li>
</ul>
</li>
<li class="nav-item">
<a href="javascript:;"><i class="my-icon nav-icon icon_3"></i><span>订单管理</span><i class="my-icon nav-more">></i></a>
<ul>
<li><a href="javascript:;"><span>订单列表</span></a></li>
<li><a href="javascript:;"><span>打个酱油</span></a></li>
<li><a href="javascript:;"><span>也打酱油</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$("#main").css({
height: $(window).height() + "px"
})
$('.nav-item>a').on('click', function() {
if (!$('.nav').hasClass('nav-mini')) {
if ($(this).next().css('display') == "none") {
$('.nav-item').children('ul').slideUp(300);
$(this).next('ul').slideDown(300);
$(this).parent('li').addClass('nav-show').siblings('li').removeClass('nav-show');
} else {
$(this).next('ul').slideUp(300);
$('.nav-item.nav-show').removeClass('nav-show');
}
}
});
$('#mini').on('click', function() {
if (!$('.nav').hasClass('nav-mini')) {
$('.nav-item.nav-show').removeClass('nav-show');
$('.nav-item').children('ul').removeAttr('style');
$('.nav').addClass('nav-mini');
} else {
$('.nav').removeClass('nav-mini');
}
});
</script>
</body>
</html>