HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单
发布时间：2013-08-07 17:06:17 作者：佚名 
我要评论
我要评论通过嵌套的ul li 实现简单的二级菜单兼容IE6-9,谷歌火狐等主流浏览器，示例代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助
复制代码
代码如下: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代码如下：
复制代码
代码如下:<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实现鼠标划过的二级菜单栏的示例，非常具有实用价值，需要的朋友可以参考下2017-09-14- 这篇文章主要为大家介绍了纯CSS实现鼠标滑过显示子菜单的二级菜单效果,通过简单的css针对hover设置实现鼠标滑过显示二级菜单的功能,具有一定参考借鉴价值,需要的朋友可以参2015-09-14
css实现圆角下拉菜单,可以自定义个数,兼容主流浏览器. "广州网聚信息传播有限公司"提供2010-06-07- 这个菜单效果挺好，使用了jQuery+CSS配合实现，完美兼容多种浏览器，鼠标滑过主菜单，分显示出对应的二级菜单，横排布局，庄重蓝色风格，适合大部分网站做主导航菜单。当2009-08-04
这篇文章主要介绍了css 实现动态二级菜单效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-30
最新评论