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

CSS和JavaScript实现右拉菜单

2016-11-09 22:13 387 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>右拉菜单</title>
<style type="text/css">
body
{
margin:0;
padding: 0;
}
.main
{
display: block;
width: 80px;
border: 2px solid #e4393c;
margin: 0;
padding: 0;
}
.main li
{
height: 30px;
line-height: 30px;
font-size: 11pt;
list-style-type: none;
text-align: left;
padding-left: 8px;
z-index: 3;
}
.main li a
{
text-decoration: none;
color: #313131;
}
.main li a:hover
{
text-decoration: underline;
font-weight: bold;
color: #e4393c;
}
.main .lihover /*鼠标移动到上面时，应用的样式*/
{
border: 1px solid #DDD;
border-right: 0;
box-shadow: 0 0 8px #DDD;
<!--浏览器兼容-->
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
background-image: none;
height:30px;
border-left:4px solid #e4393c;
}
.main .lihover .submenu /*悬浮层*/
{
display: block;
}
.submenu
{
display: none;
width: 80px;
left: 80px;
position: absolute;
top: 10px;
border: 1px solid #DDD;
z-index: 4;
background: white;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
}
.submenu a
{
display: block;
color: #737373;
font-size: 9pt;
padding: 0 8px;
height: 14px;
line-height: 14px;
margin: 4px 0;
}
</style>
</head>
<body>
<!--编写JS代码-->
<script type="text/javascript">
window.onload = function () {
var Lis = document.getElementsByTagName("li");
for (i = 0; i < Lis.length; i++) {
Lis[i].i = i;

//设置鼠标移入时的样式。
Lis[i].onmouseover = function () {
this.className = "lihover";
var h0=(this.i-1)*30+35;
var y=this.getElementsByTagName("div")[0].offsetHeight;
var h=this.getElementsByTagName("div")[0].style.top+y;
if(h<h0){
this.getElementsByTagName("div")[0].style.top=h0+"px";
}
}
//设置鼠标移开时的样式为空。
Lis[i].onmouseout = function () {
this.className = "";
}

}
}
</script>
<ul class="main">
<li><a href="#">春季</a><span></span>
<!--右拉菜单开始-->
<div class="submenu">
<a href="#">一月</a>
<a href="#">二月</a>
<a href="#">三月</a>
</div>
<!--右拉菜单结束-->
</li>
<li><a href="#">夏季</a>
<span>	</span> <div class="submenu">
<a href="#">四月</a>
<span>	</span><a href="#">五月</a>
<span>	</span><a href="#">六月</a>
</div>
</li>
<li><a href="#">秋季</a>
<div class="submenu">
<span>	</span><a href="#">七月</a>
<a href="#">八月</a>
<span>	</span><a href="#">九月</a>
</div>
</li>
<li><a href="#">冬季</a>
<div class="submenu">
<a href="#">十月</a>
<a href="#">十一月</a>
<a href="#">十二月</a>
</div>
</li>
</ul>
</body>
</html>

注意：

1.本来只用CSS就可以实现上述功能，使用 .topmenu li:hover和.topmenu li:hover .submenu完全可以实现右拉菜单的隐藏和展开，但为了兼容各大浏览器，还是使用了JavaScript。

2.可以通过给<a>标签添加border-left来实现两个链接之间的分隔线，不用设置图片等。

3.若一个模块只有一个ul（列表），不用设置div，直接对ul进行操作，既减少了代码量，又使代码简单易懂。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航