js實現橫向伸展開的二級導航菜單代碼
編輯：關於JavaScript
本文實例講述了js實現橫向伸展開的二級導航菜單代碼。分享給大家供大家參考。具體如下：
這是一款js實現的橫向伸展開二級導航菜單，鼠標放在一級菜單的第四個菜單項上，就能展開二級的菜單，菜單沒有過多美化，只是一般的修飾，使用的朋友可根據您自己的網站風格重新美化菜單風格。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-r-show-menu-style-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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 = document.getElementById(menuids[i]).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";
this.firstChild.style.backgroundColor = 'green';
}
ultags[t].parentNode.onmouseout = function () {
this.getElementsByTagName("ul")[0].style.display = "none"
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程序設計有所幫助。
小編推薦
熱門推薦