效果圖:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery後臺左側伸縮菜單代碼 - 站長素材</title>
<link rel="stylesheet" type="text/css" href="css/nav.css">
<link rel="stylesheet" type="text/css" href="font/iconfont.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</head>
<body>
<div class="nav">
<div class="nav-top">
<div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img src="images/mini.png" ></div>
</div>
<ul id="aat">
</ul>
</div>
<div style="text-align:center;margin:-650px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<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" : ["大武口區","惠農區","平羅縣"]
},
{
"p" : "吳忠市",
"c" : ["利通區","紅寺堡區","鹽池縣","同心縣","青銅峽市"]
},
{
"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>
JS: 基於jq,需要先引入JQ;
$(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(){
$('.nav-item>ul>li').css('background','none')
$(this).css('background','yellow')
// $(this).siblings().css('background','none')
})
//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');
}else{
$('.nav').removeClass('nav-mini');
}
});
});
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;}
/* 以上實際使用若已初始化可刪除 */
/* nav */
.nav{width: 220px;height: 100%;background: #263238;transition: all .3s;}
.nav a{display: block;overflow: hidden;padding-left: 20px;line-height: 46px;max-height: 46px;color: #ABB1B7;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;}
/* 此處修改導航圖標 可自定義iconfont 替換*/
.icon_1::after{content: "\e62b";}
.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: "\e621";}
/*---------------------*/
.nav-show .nav-more{transform:rotate(90deg);}
.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;}
.nav-item li:hover a{color: #FFF;background: rgba(0, 0, 0,.1);}
/* 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:#3C474C;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;}
基於站長之家提供模版改進後的樣式。一級二級標題可以動態添加,二級類只能選擇一個。