HTML+CSS+JavaScript通過(guò)嵌套u(yù)l li實(shí)現(xiàn)簡(jiǎn)單的二級(jí)菜單

發(fā)布時(shí)間：2013-08-07 17:06:17 作者：佚名

我要評(píng)論

通過(guò)嵌套的ul li 實(shí)現(xiàn)簡(jiǎn)單的二級(jí)菜單兼容IE6-9,谷歌火狐等主流瀏覽器，示例代碼如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助

復(fù)制代碼

代碼如下:

HTML網(wǎng)頁(yè)如下：(通過(guò)嵌套的<ul><li></li></ul>)(兼容IE6-9,谷歌火狐等主流瀏覽器)

復(fù)制代碼

代碼如下:

<body onload="loadFun()">
<form id="form1" runat="server">
<div id="menu">
<ul>
<li><a href="#" onclick="Show('rule')">相關(guān)法規(guī)</a>
<ul id="rule">
<li><a href="#">Adobe Reader</a></li>
<li><a href="#">Foxit Reader</a></li>
<li><a href="#">操作員計(jì)算機(jī)IE設(shè)置</a></li>
<li><a href="#">電子簽章辦理須知</a></li>
</ul>
</li>
<li><a href="#" onclick="Show('load')">相關(guān)下載</a>
<ul id="load">
<li><a href="#">Adobe Reader</a></li>
<li><a href="#">Foxit Reader</a></li>
<li><a href="#">操作員計(jì)算機(jī)IE設(shè)置</a></li>
</ul>
</li>
<li><a href="#" onclick="Show('info')">公司簡(jiǎn)介</a>
<ul id="info">
<li><a href="#">Adobe Reader</a></li>
<li><a href="#">Foxit Reader</a></li>
</ul>
</li>
<li><a href="#" onclick="Show('window')">連接窗口</a>
<ul id="window">
<li><a href="#">Adobe Reader</a></li>
<li><a href="#">Foxit Reader</a></li>
</ul>
</li>
<li><a href="#" onclick="Show('phone')">連接電話</a>
<ul id="phone">
<li><a href="#">Adobe Reader</a></li>
<li><a href="#">Adobe Reader</a></li>
</ul>
</li>
</ul>
</div>
</form>
</body>

網(wǎng)頁(yè)加載時(shí)，需要將所有的菜單項(xiàng)都暫時(shí)隱藏，調(diào)用相關(guān)的JavaScript代碼

復(fù)制代碼

代碼如下:

/*網(wǎng)頁(yè)加載時(shí)觸發(fā)的函數(shù)*/
function loadFun() {
//獲取<ul></ul>的所有子節(jié)點(diǎn)<li>節(jié)點(diǎn)5個(gè)
var array = document.getElementsByTagName("ul").item(0).childNodes;
//遍歷子節(jié)點(diǎn)
for (var i = 0; i < array.length; i++) {
//獲取<li></li>標(biāo)簽的子節(jié)點(diǎn)
var childnodes = array[i].childNodes;
for (var j = 0; j < childnodes.length; j++) {
//如果碰到主菜單中的<ul>標(biāo)簽就隱藏該子菜單的下拉菜單
if (childnodes[j].tagName == "UL") {
childnodes[j].style.display = "none";
}
}
}
}

詳細(xì)的CSS代碼如下：

復(fù)制代碼

代碼如下:

鼠標(biāo)點(diǎn)擊觸發(fā)的JavaScript代碼如下：

復(fù)制代碼

代碼如下:

/*點(diǎn)擊按鈕是觸發(fā)的事件*/
var arrays = new Array("rule","load","info","window","phone");
function Show(tagId) {
for (var i = 0; i < arrays.length; i++) {
if (arrays[i] == tagId) {
//設(shè)置全新的背景顏色
document.getElementById(arrays[i]).parentNode.style.backgroundColor = "RGB(237,237,237)";
document.getElementById(arrays[i]).style.display = "block";
}
else {
//將背景顏色還原
document.getElementById(arrays[i]).parentNode.style.backgroundColor = "RGB(216,216,216)";
document.getElementById(arrays[i]).style.display = "none";
}
}
}

效果圖如下：