您的位置：首页 > Web前端 > JavaScript

css+html+js实现下拉及多级弹出菜单

2014-08-23 08:48 711 查看
本文将使用css+html+js实现横向菜单，具有下拉的多级弹出菜单。

首先我们来看看效果图：





首先应该写html部分的代码，代码比较简单，代码如下：

<body>

<div id="menu">
<ul>
<li><a href="#" id="current">首页</a></li>
<li><a href="#">网页版式</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>

<li><a href="#">web教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>

<li><a href="#">web实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>

<div id="s1">
<ul>
<li><a href="#">软件工程</a>
<ul>
<li><a href="#">java ee</a></li>
<li><a href="#">c</a></li>
</ul>
</li>

<li><a href="#">程序语言</a>
<ul>
<li><a href="#">android</a></li>
<li><a href="#">java</a></li>
</ul>
</li>

</ul>
</div>

</body>

接着写css的代码，代码中都有注释，方便阅读和理解：

<style type="text/css">

body {
font-family: Verdana; /* 字体*/
font-size: 12px; /* 字体大小*/
line-height: 1.5; /*行高 */
}

a {
color: #000; /* 正常时的颜色 */
text-decoration: none; /*取消下划线 */
}

a:hover {
color: #F00; /* 鼠标经过时显示的颜色 */
}

#menu {
width:500px; /* div的宽度 */
height:28px; /* 高度 */
margin:0 auto; /* 水平居中 */
border-bottom:3px solid #E10001;/*设置底端线 */
}

#menu ul {
list-style: none; /* 取消列表样式 */
margin: 0px; /*外边距为0 */
padding: 0px; /*内边距为0 */
}

#menu ul li {
float:left; /* 水平浮动 */
margin-left:2px;/*左边外边距为2px */
}

#menu ul li a {
display:block;
width:87px;
height:28px;
line-height:28px;
text-align:center;
background:url(./m14.jpg) 0 0 no-repeat;
font-size:14px;
}

#menu ul li a:hover {
background:url(./m13.jpg) 0 0 no-repeat;
}

#menu ul li a#current {
background:url(./m12.jpg) 0 0 no-repeat;
font-weight:bold;
color:#fff;
}

#menu ul li ul {
border:1px solid #ccc;
display:none;
position:absolute;
}

#menu ul li ul li {
float:none;
width:87px;
background:#eee;
margin:0;
}

#menu ul li ul li a {
background:none;
}

#menu ul li ul li a:hover {
background:#333;
color:#fff;
}

#menu ul li:hover ul {
display:block;
}

#menu ul li.sfhover ul {
display:block;
}

#s1{
background-color: pink;
width:180px;
border:2px solid red;
position:relative;
left:200px;
top:190px;
height:60px;
}

#s1 ul li{
list-style-type: none;
height:25px;
width:50px;
background-color: #0ff;
float:left;
margin:10px;
}

#s1 ul li ul{
display:none;
position:absolute;
}

#s1 ul li:HOVER ul{
display:block;
background-color: blue;
margin:0px;
padding:0px;
/* width:100px; */
}

#s1 ul li.sfhover ul {
display:block;
margin:0px;
padding:0px;
}

#s1 ul li ul li{
border:1px solid red;
float:none;
margin:0px;
width:50px;

}

</style>

完成上面的步骤后，可以进行测试了，你会发现，上面的代码只在谷歌浏览器可以操作正常，能够实现下拉菜单，但是在ie和其他的浏览器，不能正常使用下拉菜单，浏览器不兼容引起的，所以为了写出兼容所有浏览器的菜单，还需js代码的控制。js代码如下；
<script type="text/javascript">
function menuFix() {
var sfEls = document.getElementById("menu").getElementsByTagName("li");
var sfEls2 = document.getElementById("s1").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
};
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
};
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
};
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
};
}

for (var i=0; i<sfEls2.length; i++) {
sfEls2[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
};
sfEls2[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
};
sfEls2[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
};
sfEls2[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
};
}

}
window.onload=menuFix;

</script>

现在就可以运行正常了，会出现本文开始显示的效果，由于是做测试的，所以有些css代码没有去掉，主要是方便调试
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css html js 菜单
相关文章推荐
新的分享
章节导航