購物網站側欄商品分類導航

admin發表於2018-12-01
網站

購物網站的商品類別非常多，所以一個好的分類導航選單十分重要，否則可能造成頁面臃腫或者分類不清晰，進而導致使用者的流失，下面介紹一種比較流行的商品類別導航選單，並介紹一下它的實現過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
body {
  font-size: 14px;
  font-family: "宋體";
}
h1, h2, h3 {
  font-size: 14px;
  font-weight: normal;
}
li {
  list-style: none;
}
a {
  color: #333;
  text-decoration: none;
}
#nav {
  width: 202px;
  height: 35px;
  background: #C00;
  margin: 50px 0 0 20px;
}
#nav h1 {
  padding-left: 17px;
  line-height: 35px;
  color: #fff;
  margin-right: 17px;
}
#box {
  width: 200px;
  border: 1px solid #B00;
  border-top: none;
  margin-left: 20px;
}
#subnav {
  width: 200px;
}
#subnav .list {
  width: 200px;
  height: 30px;
}
#subnav .list h2 {
  width: 160px;
  height: 30px;
  padding-left: 30px;
  line-height: 30px;
  margin-right: 10px;
}
#subnav .list a:hover, #subnav .active a:hover {
  color: #900;
  font-weight: bold;
}
#subnav .active {
  width: 200px;
  height: 30px;
  border-bottom: 1px solid #b00;
  border-top: 1px solid #b00;
  position: relative;
}
#subnav .active h2 {
  width: 170px;
  height: 30px;
  padding-left: 30px;
  line-height: 30px;
  background: #fff;
  position: absolute;
  left: 1px;
  top: 0;
  z-index: 4;
}
#subnav .list_nav {
  width: 500px;
  overflow: hidden;
  border: 1px solid #b00;
  position: absolute;
  left: 200px;
  top: -1px;
  z-index: 3;
  display: none;
}
#subnav .list_nav ul {
  padding: 10px;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var oBox = document.getElementById('box');
  var oSubnav = document.getElementById('subnav');
  var aLi = oSubnav.getElementsByTagName('li');
 
  for (index = 0; index < aLi.length; index++) {
    if (aLi[index].className == 'list') {
      aLi[index].onmousemove = function () {
        var aDivList = this.getElementsByTagName('div')[0];
        aDivList.style.display = 'block';
        this.className = 'active';
      }
      aLi[index].onmouseout = function () {
        var aDivList = this.getElementsByTagName('div')[0];
        aDivList.style.display = 'none';
        this.className = 'list';
      }
    }
  }
};
</script>
</head>
<body>
  <div id="nav">
    <h1>所有商品分類</h1>
  </div>
  <div id="box">
    <ul id="subnav">
      <li class="list">
        <h2><a href="#">服飾內衣、鞋靴運動</a></h2>
        <div class="list_nav">
          <ul>
            <li>螞蟻部落一</li>
            <li>螞蟻部落二</li>
            <li>螞蟻部落三</li>
            <li>螞蟻部落四</li>
          </ul>
        </div>
      </li>
      <li class="list">
        <h2><a href="#">電子商品</a></h2>
        <div class="list_nav">
          <ul>
            <li>螞蟻部落一</li>
            <li>螞蟻部落二</li>
            <li>螞蟻部落三</li>
            <li>螞蟻部落四</li>
          </ul>
        </div>
      </li>
      <li class="list">
        <h2><a href="#">服飾內衣、鞋靴運動</a></h2>
        <div class="list_nav">
          <ul>
            <li>螞蟻部落一</li>
            <li>螞蟻部落二</li>
            <li>螞蟻部落三</li>
            <li>螞蟻部落四</li>
          </ul>
        </div>
      </li>
      <li class="list">
        <h2><a href="#">服飾內衣、鞋靴運動</a></h2>
        <div class="list_nav">
          <ul>
            <li>螞蟻部落一</li>
            <li>螞蟻部落二</li>
            <li>螞蟻部落三</li>
            <li>螞蟻部落四</li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</body>
</html>

以上程式碼實現了我們分類要求，下面介紹一下此特效的實現過程:

一.實現原理:

滑鼠懸浮在標題實現字型變色變粗效果:

[CSS] 純文字檢視 複製程式碼
#subnav .list a:hover, #subnav .active a:hover {
  color:#900;
  font-weight:bold;
}

以上程式碼實現了滑鼠懸浮字型變粗和變色效果。

滑鼠懸浮時標題和具體分類無縫連線效果:

在滑鼠懸浮的時候，subnav元素的第一級子元素li（主分類所在的li）會被新增以下樣式:

[CSS] 純文字檢視 複製程式碼
#subnav .active {
  width:200px;
  height:30px;
  border-bottom:1px solid #b00;
  border-top:1px solid #b00;
  position:relative;
}

設定主分類所在的li的尺寸為200x30，然後設定上下邊框樣式。

最後將其設定為相對定位，這樣被設定為絕對定位的子分類所在的div會以此li為定位參考物件。

[CSS] 純文字檢視 複製程式碼
#subnav .active h2 {
  width:170px;
  height:30px;
  padding-left:30px;
  line-height:30px;
  background:#fff;
  position:absolute;
  left:1px;
  top:0;
  z-index:4;
}

將h2設定為絕對定位，它的定位參考元素是父元素li；設定left:1px，這樣就可以將子分類div（list_nav）的左邊框覆蓋，因為此div的z-index的值小於父元素li的z-index的值，同時子分類div（list_nav）top值設定為-1px，這樣可以使其向上移動1px，與li的上邊框對齊，於是就實現了無縫銜接效果。

二.程式碼註釋:

（1）.window.onload=function(){}，文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var oBox=document.getElementById('box')，獲取id屬性值為box的物件。

（3）. var oSubnav=document.getElementById('subnav')，獲取id屬性值為'subnav'的物件。

（4）.var aLi=oSubnav.getElementsByTagName('li')，oSubnav物件下所有的li元素物件集合。

（5）.for(index=0;index<aLi.length;index++)，遍歷li物件集合中的每一個li元素。

（6）.if(aLi[index].className=='list')，判斷li元素是否具有屬性值為list的class屬性。

（7）.aLi[index].onmousemove=function(){}，註冊事件處理函式。

（8）.var aDivList=this.getElementsByTagName('div')[0]，獲取當前li下面的第一個div物件。

（9）.aDivList.style.display='block'，讓div顯示出來。

（10）.this.className='active'，將當前li的class屬性值設定為active。

（11）.aLi[index].onmouseout=function()，註冊事件處理函式。

（12）.var aDivList=this.getElementsByTagName('div')[0]，獲取當前li下面的第一個div元素。

（13）.aDivList.style.display='none'，將此div設定為隱藏狀態。

（14）.this.className='list'，將當前li的class屬性值設定為list。

三.相關閱讀:

（1）.document.getElementById方法參閱document.getElementById()一章節。

（2）.JavaScript getElementsByTagName方法參閱JavaScript getElementsByTagName()一章節。

（3）.mousemove事件參閱JavaScript mousemove 事件一章節。

（4）.className參閱JavaScript className 屬性一章節。

（5）.mouseout參閱JavaScript mouseout 事件一章節。

相關文章