简洁美观的左侧导航,可收缩_html左侧可伸缩导航栏-CSDN博客

本文链接：https://blog.csdn.net/qq_16503045/article/details/83546028

<!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>

</body>
</html>