<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery后台左侧伸缩菜单代码 - 站长素材</title>
<style type="text/css">
@charset "utf-8";
/* 以下实际使用若已初始化可删除 .nav height父级需逐级设置为100%*/
body,
html {
height: 100%;
background: #E2E2E2
}
body,
ul {
margin: 0;
padding: 0
}
body {
font: 14px "微软雅黑", "宋体", "Arial Narrow", HELVETICA;
-webkit-text-size-adjust: 100%;
}
li {
list-style: none
}
a {
text-decoration: none;
}
/* 以上实际使用若已初始化可删除 */
#navn>div {
display: inline-block;
vertical-align: top;
}
/* nav */
.nav-top {
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.nav-top .nav-toptxt {
border-bottom: 1px solid rgba(255, 255, 255, .1);
color: #fff;
font-size: 30px;
width: 60px;
text-align: center;
cursor: pointer;
}
.nav {
width: 220px;
height: 100%;
background: #144B85;
transition: all .3s;
overflow: auto;
}
.nav a {
display: block;
overflow: hidden;
padding-left: 20px;
line-height: 46px;
max-height: 46px;
color: #fff;
transition: all .3s;
}
.nav a span {
margin-left: 30px;
}
.nav-item {
position: relative;
}
.nav-item.nav-show {
border-bottom: none;
}
.nav-item ul {
display: none;
background: rgba(0, 0, 0, .1);
}
.nav-item.nav-show ul {
display: block;
}
.nav-item>a:before {
content: "";
position: absolute;
left: 0px;
width: 2px;
height: 46px;
background: #34A0CE;
opacity: 0;
transition: all .3s;
}
.nav .nav-icon {
font-size: 20px;
position: absolute;
margin-left: -1px;
top: 14px;
}
/* 此处修改导航图标 可自定义iconfont 替换*/
.icon_1::after {
content: "";
display: block;
width: 20px;
height: 20px;
/*background: url(men1.png)no-repeat;*/
}
.nav-item:nth-child(1) .icon_1::after {
background: url(men1.png)no-repeat;
background-size: 100% 100%;
}
.nav-item:nth-child(2) .icon_1::after {
background: url(men2.png)no-repeat;
background-size: 100% 100%;
}
.nav-item:nth-child(3) .icon_1::after {
background: url(men3.png)no-repeat;
background-size: 100% 100%;
}
/*.nav-item:nth-child(2) .icon_1::after{background: url(men1.png)no-repeat;}*/
/*.icon_2::after{content: "\e669";}*/
/*.icon_3::after{content: "\e61d";}*/
/*---------------------*/
.nav-more {
float: right;
margin-right: 20px;
font-size: 12px;
transition: transform .3s;
}
/* 此处为导航右侧箭头 如果自定义iconfont 也需要替换*/
.nav-more::after {
content: ">";
color: #fff;
font-style: normal;
font-family: SimSun;
}
/*---------------------*/
.nav-show .nav-more {
transform: rotate(90deg);
}
.nav-show,
.nav-item>a:hover {
color: #2AF8CB;
}
.nav-show>a:before,
.nav-item>a:hover:before {
opacity: 1;
}
.nav-item li:hover a {
color: #FFF;
background: #3399FF;
}
/* nav-mini */
.nav-mini.nav {
width: 60px;
}
.nav-mini.nav .nav-icon {
/* margin-left:-2px; */
}
.nav-mini.nav .nav-item>a span {
display: none;
}
.nav-mini.nav .nav-more {
margin-right: -20px;
}
.nav-mini.nav .nav-item ul {
position: absolute;
top: 0px;
left: 60px;
width: 180px;
z-index: 99;
background: #144B76;
overflow: hidden;
}
.nav-mini.nav .nav-item:hover {
background: rgba(255, 255, 255, .1);
}
.nav-mini.nav .nav-item:hover .nav-item a {
color: #FFF;
}
.nav-mini.nav .nav-item:hover a:before {
opacity: 1;
}
.nav-mini.nav .nav-item:hover ul {
display: block;
}
li.act {
background: #3399FF;
}
</style>
<link rel="stylesheet" type="text/css" href="font/iconfont.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function() {
// nav收缩展开
$('#aat').on('click','.nav-item>a',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');
}
}
});
// 标志点击样式
$('#aat').on('click','.nav-item>ul>li',function(){
$(this).addClass("act").siblings().removeClass("act");
$(this).parents(".nav-item").siblings().find(">ul>li").removeClass("act");
console.log($(this).text())
})
// nav-mini切换
$('#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');
$('.nav').css('overflow','visible');
}else{
$('.nav').removeClass('nav-mini');
$('.nav').css('overflow','auto');
}
});
});
</script>
</head>
<body>
<div class="nav">
<div class="nav-top">
<div id="mini" class="nav-toptxt">≡</div>
</div>
<ul id="aat">
<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>
</ul>
</li>
<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>
</ul>
</li>
</ul>
</div>
<div>
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：
<a href="http://sc.chinaz.com/" target="_blank">站长素材</a>
</p>
</div>
<script>
$(function() {
// var navList = [
// {
// "p" : "银川市",
// "c" : ["兴庆区","金凤区"]
// },
// {
// "p" : "石嘴山市",
// "c" : ["大武口区","惠农区"]
// }
// ]
// var navData = '';
// for(let i=0;i<navList.length;i++){
// navData+= "<li class='nav-item'><a href='javascript:;'><i class='my-icon nav-icon icon_1'></i><span>"+navList[i].p+"</span><i class='my-icon nav-more'></i></a><ul>"
// for(let w=0;w<navList[i].c.length;w++){
// navData+="<li><a href='javascript:;'><span>"+navList[i].c[w]+"</span></a></li>"
// }
// navData+="</ul></li>"
// }
// console.log(navData)
// $('#aat').html(navData)
})
</script>
</body>
</html>
<!--<ul id="aat">
<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>
</ul>
</li>
<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>
</ul>
</li>
</ul>-->效果1:
效果2：
