二級下拉導航選單製作詳解

admin發表於2018-08-24

在一級導航選單的基礎上，可能還需要進一步的細分。

那麼二級下拉導航選單是一個不錯的選擇，也是前端比較掌握的基礎。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>    
* {
  margin: 0;
  padding: 0;
  font-size: 14px;
}
a {
  color: #333;
  text-decoration: none;
}
ul {
  list-style: none;
}
.nav {
  width: 600px;
  height: 30px;
  margin-left:50px;
  border-bottom: 5px solid #F60;
}

.nav li {
  width:120px;
  height:30px;
  float: left;
  position:relative;
}
.nav li a {
  width:120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #efefef;
  display: block;
}
.subNav {
  width:120px;
  height:0;
  overflow:hidden;
  position:absolute;
  top:30px;
  left:0;
}
.subNav li a {
  background:#ddd;
}
.subNav li a:hover {
  background:#efefef;
}
</style>
<script>
window.onload = function () {
  var aLi = document.querySelectorAll("li");
  for (var i = 0; i < aLi.length; i++) {
    aLi[i].onmouseover = function () {
      var oSubNav = this.querySelectorAll("ul")[0];
      if (oSubNav) {
        var This = oSubNav;
        clearInterval(This.timer);
        This.timer = setInterval(function () {
          This.style.height = This.offsetHeight + 16 + "px";
          if (This.offsetHeight >= 120) {
            clearInterval(This.timer);
            This.style.height = "120px";
          }
        }, 30);
      }
    }

    aLi[i].onmouseout = function () {
      var oSubNav = this.querySelectorAll('ul')[0];
      if (oSubNav) {
        var This = oSubNav;
        clearInterval(This.timer);
        This.timer = setInterval(function () {
          This.style.height = This.offsetHeight - 16 + "px";
          if (This.offsetHeight <= 120 % 16) {
            clearInterval(This.timer);
            This.style.height = '0';
          }
        },30)
      }
    }
  }
}        
</script>
</head>
<body>
<ul class="nav">
  <li>
    <a href="#">一級選單</a>
    <ul class="subNav">
      <li><a href="#">二級選單1</a></li>
      <li><a href="#">二級選單1</a></li>
      <li><a href="#">二級選單2</a></li>
      <li><a href="#">二級選單3</a></li>
      <li><a href="#">二級選單4</a></li>
    </ul>
  </li>
  <li>
    <a href="#">一級選單</a>
    <ul class="subNav">
      <li><a href="#">二級選單</a></li>
      <li><a href="#">二級選單</a></li>
      <li><a href="#">二級選單</a></li>
      <li><a href="#">二級選單</a></li>
    </ul>
  </li>
  <li><a href="#">一級選單</a></li>
  <li><a href="#">一級選單</a></li>
  <li><a href="#">螞蟻部落</a></li>
</ul>
</body>
</html>

滑鼠懸浮可以下拉出現二級導航選單，此效果並不是僅僅應用了CSS，而且還有JavaScript的應用，當然使用純CSS也是很容實現的，考慮到前端更為核心的內容還是JavaScript，所以介紹一下藉助JavaScript實現的效果。

實現過程:

[CSS] 純文字檢視 複製程式碼
* {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

比較粗暴的一種樣式重置，將所有的元素內外邊距設定為0，字型大小設定為14px。

更多內容參閱css刪除頁面周邊空白一章節。

[CSS] 純文字檢視 複製程式碼
a {
  color: #333;
  text-decoration: none;
}

重置預設超連結樣式，所有連結顏色設定為#333，並且去掉下劃線。

[CSS] 純文字檢視 複製程式碼
ul {
  list-style: none;
}

重置列表的預設樣式，因為自帶的一些格式化樣式實在太醜了。

[CSS] 純文字檢視 複製程式碼
.nav {
  width: 600px;
  height: 30px;
  margin-left:50px;
  border-bottom: 5px solid #F60;
}

設定水平主導航選單的尺寸、外邊距和下邊框。

[CSS] 純文字檢視 複製程式碼
.nav li {
  width:120px;
  height:30px;
  float: left;
  position:relative;
}

設定每一個選單的樣式。

通過width和height屬性設定尺寸。

float設定li元素左浮動，這樣它們就可以水平展示。

最後將其設定為相對定位，這個很重要，後面會有介紹。

[CSS] 純文字檢視 複製程式碼
.nav li a {
  width:120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #efefef;
  display: block;
}

a是內聯元素，預設不能設定尺寸，所以通過display:block將其轉換為塊級元素。

緊接著再設定它的尺寸、行高、背景色和外邊距。

內聯元素可以參閱CSS 塊級/內聯元素一章節。

[CSS] 純文字檢視 複製程式碼
.subNav {
  width:120px;
  height:0;
  overflow:hidden;
  position:absolute;
  top:30px;
  left:0;
}

設定二級導航選單的樣式。

預設狀態下，二級導航選單是隱藏的，實現方式是，將其高度設定為0，然後再結合overflow:hidden，將超出的內容隱藏。採用絕對定位，將其設定於一個合適的位置，定位參考物件是它的父元素li，這也是為什麼li元素要設定為相對定位的原因，具體參閱CSS position:absolute 絕對定位一章節。

[JavaScript] 純文字檢視 複製程式碼
window.onload = function () {
  // code
}

文件內容完全載入完畢之後再去執行函式中的程式碼。

具體參閱window.onload用法詳解一章節。

[JavaScript] 純文字檢視 複製程式碼
var aLi = document.querySelectorAll("li");

獲取所有的li元素，具體參閱JavaScript querySelectorAll()一章節。

[JavaScript] 純文字檢視 複製程式碼
for (var i = 0; i < aLi.length; i++) {
  // code
}

通過for迴圈遍歷li元素集合中的每一個元素。

[JavaScript] 純文字檢視 複製程式碼
aLi[i].onmouseover = function () {
  // code
}

為當前li元素註冊mouseover事件處理函式。

具體參閱JavaScript mouseover 事件一章節。

[JavaScript] 純文字檢視 複製程式碼
var oSubNav = this.querySelectorAll("ul")[0]

獲取二級導航選單ul元素。

[JavaScript] 純文字檢視 複製程式碼
if (oSubNav) {
  // code
}

判斷是否存在二級導航選單，如果存在，則執行響應的程式碼。

[JavaScript] 純文字檢視 複製程式碼
var This = oSubNav;

將二級下來選單物件賦值給變數This。

[JavaScript] 純文字檢視 複製程式碼
clearInterval(This.timer)

停止當前定時器函式的執行，防止連續滑鼠懸浮導致定時器函式重疊執行的現象。

具體參閱JavaScript clearInterval()一章節。

[JavaScript] 純文字檢視 複製程式碼
This.timer = setInterval(function () {
  This.style.height = This.offsetHeight + 16 + "px";
 if (This.offsetHeight >= 120) {
   clearInterval(This.timer);
  This.style.height = "120px";
  }
}, 30)

預設狀態下，二級下來選單高度是0px，所以就隱藏了。

本程式碼通過定時器函式，每隔30毫秒為二級下來選單增加16px。

如果達到了210px，那麼就停止定時器函式的執行。

setInterval()可以參閱JavaScript setInterval()一章節。

offsetHeight可以參閱JavaScript offsetHeight一章節。

style可以參閱JavaScript style 屬性一章節。

相關文章