js垂直右侧展开导航菜单详解

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了鼠标悬浮能够在右侧出现导航菜单的效果。

这样的效果在实际应用中也是比较常见的,代码实例如下:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<title>犀牛前端部落</title> 
<style type="text/css">
.suckerdiv ul{
  width:120px; 
  position:relative; 
}
.suckerdiv ul li ul{
  left:120px;
  position:absolute; 
  width:140px;
  top:0; 
  display:none;
}
.suckerdiv ul li a{ 
  display:block; 
  color:#353302;
  text-decoration:none; 
  font:12px 宋体; 
  background:#eee; 
  line-height:24px; 
  padding:0px 10px; 
  border:1px solid #fff; 
  border-bottom:0; 
}
.suckerdiv ul li a:hover{
  color:white; 
  background-color:#97c839; 
}
.suckerdiv a.subfolderstyle:hover{
  background:#97c839; 
}
</style>
<script type="text/javascript">
var menuids = ["suckertree1"]
function buildsubmenus() {
  for (var index = 0; index < menuids.length; index++) {
    var ultags = document.getElementById(menuids[index]).getElementsByTagName("ul")
    for (var t = 0; t < ultags.length; t++) {
      ultags[t].parentNode.getElementsByTagName("a")[0].className = "subfolderstyle"
      ultags[t].parentNode.onmouseover = function () {
        this.getElementsByTagName("ul")[0].style.display = "block";
      }
      ultags[t].parentNode.onmouseout = function () {
        this.getElementsByTagName("ul")[0].style.display = "none"
      }
    }
  }
}
window.onload=function(){
  buildsubmenus();
}
</script>
</head>
<body>
<div class="suckerdiv">
  <ul id="suckertree1">
    <li><a href="#">腾讯新闻</a></li>
    <li><a href="#">腾讯汽车</a></li>
    <li><a href="#">腾讯科技</a></li>
    <li>
      <a href="#">腾讯手机</a>
      <ul>
        <li><a href="#">HTC</a></li>
        <li><a href="#">联想</a></li>
        <li><a href="#">华为</a></li>
        <li><a href="#">中兴</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).var menuids = ["suckertree1"],将外层ul的id属性值存入数组。

(2).function buildsubmenus() {},此方法实现了菜单功能。

(3).for (var index = 0; index < menuids.length; index++) {},遍历数组元素,当然这里数组中只有一个元素。

(4).var ultags = document.getElementById(menuids[index]).getElementsByTagName("ul"),获取二级ul元素集合。

(5).for (var t = 0; t < ultags.length; t++) {},遍历集合中的每一个ul元素。

(6).ultags[t].parentNode.getElementsByTagName("a")[0].className = "subfolderstyle",将二级ul元素的父元素节点(li元素)下的第一个链接元素添加class样式类"subfolderstyle"。和下面的这个css代码对应:

.suckerdiv a.subfolderstyle:hover{

  background:#97c839; 

},这样鼠标悬浮的时候,就可以实现背景变色。

(7).ultags[t].parentNode.onmouseover = function () {

  this.getElementsByTagName("ul")[0].style.display = "block";

},注册onmouseover事件处理函数,当鼠标悬浮二级ul元素展现。

(8).ultags[t].parentNode.onmouseout = function () {

  this.getElementsByTagName("ul")[0].style.display = "none"

},注册onmouseout 事件处理函数,当鼠标离开,二级菜单消失。

二.相关阅读:

(1).getElementsByTagName()可以参阅document.getElementsByTagName()一章节。

(2).className属性可以参阅js className一章节。

(3).parentNode可以参阅parentNode一章节。

(4).onmouseover事件可以参阅javascript mouseover事件一章节。

(5).onmouseout事件可以参阅javascript mouseout事件一章节。

回复

我来回复
  • 暂无回复内容