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事件一章节。