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

2020-03-24 15:58:19

字体：大中小

来源：转载

供稿：网友

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

复制代码代码如下:
body onload="loadFun()"
form id="form1" runat="server"
div id="menu"
ul
li a href="#" 相关法规 /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="#" 相关下载 /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="#" 公司简介 /a
ul id="info"
li a href="#" Adobe Reader /a /li
li a href="#" Foxit Reader /a /li
/ul
/li
li a href="#" 连接窗口 /a
ul id="window"
li a href="#" Adobe Reader /a /li
li a href="#" Foxit Reader /a /li
/ul
/li
li a href="#" 连接电话 /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代码如下：

复制代码代码如下:
style type="text/css"
/*设置上一级菜单的样式*/
html,body
{
width:100%;
height:100%;
/*消除网页的边界*/
margin:0px;
padding:0px;
border-style:none;
}
#menu
{
width:225px;
height:320px;
background-color:RGB(216,216,216);
padding:0px;
margin:0px;
}
/*去掉列表前的圆点*/
#menu ul
{
width:225px;
list-style-type:none;
padding:0px;
margin:0px; /*消除左侧间隙*/
}
#menu ul li
{
width:225px;/*填充满整个边栏*/
/*
margin:0px;
padding:0px;
*/
}
#menu ul li a
{
display:block; /*先转化成块级元素*/
color:Gray;
text-align:left;
text-decoration:none;
padding:10px 0px 10px 30px;/*设置距离左侧的边栏和上边距*/
font-size:14px;
}
#menu ul li a:hover
{
color:Orange;
text-align:left;
text-decoration:none;
padding:10px 0px 10px 30px;
font-size:14px;
}
/*设置子菜单的样式*/
#menu ul li ul
{
list-style-type:none;
/*
padding:0px;
margin:0px;
*/
}
#menu ul li ul li
{
width:225px; /*通过设置宽度来填充*/
}
#menu ul li ul li a
{
display:block;
/*此处可以通过设置来调整相关的样式*/
padding:6px 0px 6px 60px;
text-align:left;
text-decoration:none;
font-size:12px;
}
#menu ul li ul li a:hover
{
padding:6px 0px 6px 60px;
text-align:left;
text-decoration:none;
font-size:12px;
color:Black;
background-color:#CD2626;
}
/style

鼠标点击触发的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";
}
}
}

效果图如下：
更多编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html中的字体颜色怎么设置？css设置字体颜色方法介绍

下一篇：HTML5的classList属性操作CSS类的使用详解