js实现横向伸展开的⼆级导航菜单代码
本⽂实例讲述了js实现横向伸展开的⼆级导航菜单代码。分享给⼤家供⼤家参考。具体如下：
这是⼀款js实现的横向伸展开⼆级导航菜单，⿏标放在⼀级菜单的第四个菜单项上，就能展开⼆级的菜单，菜单没有过多美化，只是⼀般的修饰，使⽤的朋友可根据您⾃⼰的⽹站风格重新美化菜单风格。
运⾏效果截图如下：
在线演⽰地址如下：
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横向伸展开来的⼆级导航菜单</title>
<style type="text/css">
.suckerdiv { }
.suckerdiv ul { width: 120px; position: relative; }
.suckerdiv ul li ul { left: 120px; /* Parent menu width - 1*/ position: absolute; width: 140px; /*sub menu width*/ top: 0; display: none; }
/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul { left: 159px; /* Parent menu width - 1*/ }
/* menu links style */
.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:visited { color: black; }
.
suckerdiv ul li a:hover{ color: white; background-color: #97c839; }
.suckerdiv .subfolderstyle { }
.suckerdiv a.subfolderstyle:hover { background: #97c839 url() no-repeat center right; }
</style>
</head>
<body>
<script type="text/javascript">
var menuids = ["suckertree1"]
function buildsubmenus() {
for (var i = 0; i < menuids.length; i++) {
var ultags = ElementById(menuids[i]).getElementsByTagName("ul")
for (var t = 0; t < ultags.length; t++) {
ultags[t].ElementsByTagName("a")[0].className = "subfolderstyle"
ultags[t].useover = function () {
this.firstChild.style.backgroundColor = 'green';
}
ultags[t].useout = function () {
this.firstChild.style.backgroundColor = '';
}
}
导航菜单}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>
<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>
希望本⽂所述对⼤家的javascript程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。