JavaScript二級導航選單

admin發表於2018-05-22
JavaScript

分享一個比較簡單的二級導航選單效果，滑鼠懸浮選單能夠出現二級選單。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
a {
  color: #fff;
  text-decoration: none;
}
 
ul {
  margin: 0;
  list-style: none;
}
 
#menu {
  width: 500px;
  height: 60px;
  background: #06F;
  border-radius: 6px;
  box-shadow: 2px 2px 5px #0066FF;
}
 
#menu li {
  float: left;
  margin-top: 10px;
  line-height: 22px;
  padding: 0;
  position: relative;
}
 
#menu li a {
  padding: 10px 20px;
  display: inline-block;
}
 
#menu li .hover {
  background: #fff;
  opacity: 0.5;
  color: #06F;
  border-radius: 5px;
}
 
#menu li .lis {
  width: 300px;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  background: #FC6;
  position: absolute;
  top: 70px;
}
 
#menu li .lis a {
  padding: 0 10px;
  background: none;
  opacity: 1;
  color: #fff;
}
 
#menu li .lis a:hover {
  text-decoration: underline;
}
</style>
<script>
window.onload = function() {
  var oUl = document.getElementById('menu');
  var aLi = oUl.getElementsByTagName('li');
  var aDiv = oUl.getElementsByTagName('div');
  var timer = null;
 
  for (var i = 0; i < aLi.length; i++) {
    var oA = aLi[i].getElementsByTagName('a')[0];
    oA.index = i;
    clearTimeout(timer);
 
    oA.onmouseover = function() {
      this.className = 'hover';
      aDiv[this.index].style.display = 'block';
    }
    oA.onmouseout = function() {
      this.className = '';
      n = this.index;
      timer = setTimeout(function() {
        aDiv[n].style.display = 'none';
      }, 200);
    }
    aDiv[i].onmouseover = function() {
      clearTimeout(timer);
      this.style.display = 'block';
    }
    aDiv[i].onmouseout = function() {
      this.style.display = 'none';
    }
  }
}
</script>
</head>
<body>
<div>
  <ul id="menu">
    <li>
      <a href="javascript:;">首頁</a>
      <div class="lis" style="display:none;">
        <a href="javascript:;">最新活動</a>
        <a href="javascript:;">最新更新</a>
        <a href="javascript:;">最新課程</a>
      </div>
    </li>
    <li>
      <a href="javascript:;">關於我們</a>
      <div class="lis" style="display:none;">
        <a href="javascript:;">企業文化</a>
        <a href="javascript:;">聯絡我們</a>
        <a href="javascript:;">客服</a>
      </div>
    </li>
    <li>
      <a href="javascript:;">課程</a>
      <div class="lis" style="display:none;">
        <a href="javascript:;">js課程</a>
        <a href="javascript:;">css3課程</a>
        <a href="javascript:;">HTML5課程</a>
      </div>
    </li>
  </ul>
</div>
</body>
</html>

相關文章