左側選單可以收縮.html
阿新 • • 發佈：2018-12-10
<!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：
