垂直摺疊導航選單實現詳解

admin發表於2018-08-24

純CSS實現此效果可以參閱CSS3垂直摺疊導航選單一章節。

本章節分享一個結合JavaScript實現的垂直摺疊導航選單效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  margin:0;
  padding:0 0 12px 0;
  font-size:12px;
  line-height:22px;
  font-family:"\5b8b\4f53", "Arial Narrow";
  background:#fff;
}
form, ul, li, p, h1, h2, h3, h4, h5, h6{
  margin:0;
  padding:0;
}
input, select{
  font-size:12px;
  line-height:16px;
}
img{border:0;}
ul, li{list-style-type:none;}
a{
  color:#00007F;
  text-decoration:none;
}
a:hover{
  color:#bd0a01;
  text-decoration:underline;
}
.box{
  width:150px;
  margin:0 auto;
}
.menu{
  overflow:hidden;
  border-color:#C4D5DF;
  border-style:solid;
  border-width:0 1px 1px;
}
.menu li.level1 a{
  display:block;
  height:28px;
  line-height:28px;
  background:#EBF3F8;
  font-weight:700;
  color:#5893B7;
  text-indent:14px;
  border-top:1px solid #C4D5DF;
}
.menu li.level1 a:hover{
  text-decoration:none;
}
.menu li.level1 a.current{
  background:#B1D7EF;
}
 
.menu li ul{
  overflow:hidden;
}
.menu li ul.level2{
  display:none;
}
.menu li ul.level2 li a{
  display:block;
  height:28px;
  line-height:28px;
  background:#ffffff;
  font-weight:400;
  color:#42556B;
  text-indent:18px;
  border-top:0px solid #ffffff;
  overflow:hidden;
}
.menu li ul.level2 li a:hover {
        color:#f60;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".level1 > a").click(function(){
    $(this).addClass("current") 
    .next().show() 
    .parent().siblings().children("a").removeClass("current")
    .next().hide(); 
    return false;
  }); 
});
</script>
</head>
<body>
<div class="box">
  <ul class="menu">
    <li class="level1"> 
      <a href="#none">前端專區</a>
      <ul class="level2">
        <li><a href="#none">html教程</a></li>
        <li><a href="#none" >css教程</a></li>
        <li><a href="#none" >div教程</a></li>
        <li><a href="#none" >jquery教程</a></li>
      </ul>
    </li>
    <li class="level1"> 
      <a href="#none">資源專區</a>
      <ul class="level2">
        <li><a href="#none">特效下載</a></li>
        <li><a href="#none">電腦特效</a></li>
        <li><a href="#none">手機特效</a></li>
        <li><a href="#none">圖片下載</a></li>
      </ul>
    </li>
    <li class="level1"> 
    <a href="#none">螞蟻部落</a>
      <ul class="level2">
        <li><a href="#none">前端專區</a></li>
        <li><a href="#none">特效專區</a></li>
        <li><a href="#none">站長交流</a></li>
        <li><a href="#none">管理專區</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

上面的程式碼實現了垂直導航選單效果，下面介紹一下它的實現過程。

一.實現過程:

<div class="box"></div>最外層的box元素能夠將整個導航欄實現了水平居中效果，css程式碼如下:

[CSS] 純文字檢視 複製程式碼
.box{
  width:150px;
  margin:0 auto;
}

摺疊選單的結構佈局:

[HTML] 純文字檢視 複製程式碼
<li class="level1"> 
  <a href="#none">前端專區</a>
  <ul class="level2">
    <li><a href="#none">html教程</a></li>
    <li><a href="#none" >css教程</a></li>
    <li><a href="#none" >div教程</a></li>
    <li><a href="#none" >jquery教程</a></li>
  </ul>
</li>

上面的程式碼是摺疊選單的結構，作為主導航的連結a被使用display:block設定為塊級元素，這樣就可以設定它的尺寸，同時在預設狀態下，作為二級選單的ul元素是隱藏的，也就是說二級選單是摺疊的。

二.程式碼註釋:


[JavaScript] 純文字檢視 複製程式碼
$(document).ready(function(){
  // code
})

當文件結構完全載入完畢再去執行函式中的程式碼。

[JavaScript] 純文字檢視 複製程式碼
$(".level1 > a").click(function(){
  // code
})

為class屬性值為level1元素下的一級a元素註冊click事件處理函式。

[JavaScript] 純文字檢視 複製程式碼
$(this).addClass("current").next()
.show()
.parent()
.siblings()
.children("a")
.removeClass("current")
.next()
.hide()

鏈式呼叫效果，實現點選主導航連結實現當前點選主導航後面的二級選單展開，其他選單摺疊效果。

[JavaScript] 純文字檢視 複製程式碼
return false

取消主導航連結的跳轉效果。

相關文章