HTML+CSS+JavaScript根据嵌套循环ul li完成简易的2级菜

日期:2021-03-09 类型:科技新闻 

关键词:h5平台,手机端网页,手机端网页模板,免费的h5场景制作平台,h5制作工具


拷贝编码
编码以下:

HTML网页页面以下:(根据嵌套循环的<ul><li></li></ul>)(适配IE6⑼,谷歌火狐等流行访问器)


拷贝编码
编码以下:

<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编码以下:

拷贝编码
编码以下:

<style type="text/css">
/*设定上1级菜单的款式*/
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";
}
}
}

实际效果图以下: