HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单_html5

html5

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: 如何让图片相对于上层DIV始终保持... 下一篇:让图片img标签在div里上下左右居...

HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单

发布时间：2022-04-14 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

复制代码

代码如下:

HTML网页如下：(通过嵌套的<ul><li></li></ul>)(兼容IE6-9,谷歌火狐等主流浏览器)

复制代码

代码如下:

<body onload="loaDFun()">
<form id="form1" runat="server">
<div id="menu">
<ul>
<li><a href="#" onclick="Show('rule')">相关法规</a>
<ul id="rule">
<li><a href="#">Adobe Reader</a></li>
<li><a href="#">FoxIT Reader</a></li>
<li><a href="#">操作员计算机IE设置</a></li>
<li><a href="#">电子签章办理须知</a></li>
</ul>
</li>
<li><a href="#" onclick="Show('load')">相关下载</a>
<ul id="load">
<li><a href="#">Adobe Reader</a></li>
<li><a href="#">Foxit Reader</a></li>
<li><a href="#">操作员计算机IE设置</a></li>
</ul>
</li>
<li><a href="#" onclick="Show('info')">公司简介</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>

网页加载时，需要将所有的菜单项都暂时隐藏，调用相关的JavaScript代码

复制代码

代码如下:

/*网页加载时触发的函数*/
function loadFun() {
//获取<ul></ul>的所有子节点<li>节点5个
VAR array = document.getelementsbytagname("ul").item(0).childNodes;
//遍历子节点
for (var i = 0; i < array.length; i++) {
//获取<li></li>标签的子节点
var childnodes = array[i].childNodes;
for (var j = 0; j < childnodes.length; j++) {
//如果碰到主菜单中的<ul>标签就隐藏该子菜单的下拉菜单
if (childnodes[j].tagName == "UL") {
childnodes[j].style.display = "none";
}
}
}
}

详细的CSS代码如下：

复制代码

代码如下:

鼠标点击触发的JavaScript代码如下：

复制代码

代码如下:

/*点击按钮是触发的事件*/
var arrays = new Array("rule","load","info","window","phone");
function Show(tagId) {
for (var i = 0; i < arrays.length; i++) {
if (arrays[i] == tagId) {
//设置全新的背景颜色
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";
}
}
}

效果图如下：