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

js实现二级菜单渐隐显示

2015-11-03 15:04 831 查看

先给大家看一看最终的效果图：

下面就是js实现二级菜单渐隐显示的代码：

<!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>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>导航菜单二级菜单滑动渐隐显示</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
{
margin: 0;
padding: 0;
list-style-type: none;
}
a, img
{
border: 0;
}
a, a:visited
{
color: #5e5e5e;
text-decoration: none;
}
a:hover
{
color: #333;
text-decoration: underline;
}
body
{
font: 12px/180% Arial,Lucida,Verdana, "宋体" ,Helvetica,sans-serif;
color: #333;
background: #fff;
}
/* navbox */
.navbox, .nav li, .nav li.current a, .nav li.selected a span, .nav li a.selected, .nav li a.selected span
{
background: url(images/headerbg.png) no-repeat;
}
.navbox
{
height:39px;
background-position:0 -138px;
background-repeat:repeat-x;
position: relative;
z-index:9;
}
.nav
{
width: 960px;
margin: 0 auto;
}
.nav li
{
float: left;
height: 39px;
background-position: 100% -99px;
padding: 0 3px 0 2px;
position: relative;
}
.nav li.last
{
background: none;
}
.nav li a
{
float: left;
display: block;
padding: 0 0 0 4px;
height: 39px;
overflow: hidden;
}
.nav li a span
{
float: left;
display: block;
padding: 0 4px 0 0;
line-height: 39px;
font-size: 14px;
color: #fff;
font-weight: 800;
cursor: pointer;
width: 142px;
text-align: center;
}
.nav li.selected a, .nav li a.selected
{
background-position: 0 -60px;
text-decoration: none;
}
.nav li.selected a span, .nav li a.selected span
{
background-position: 100% -60px;
color: #ff7e00;
}
.nav li.selected .submenu
{
display: block;
}
.nav li .submenu
{
display: none;
position: absolute;
top: 39px;
left: 6px;
}
.nav li .submenu
{
border-style: solid;
border-width: 0px 1px 1px 1px;
border-color: #ddd;
padding: 0 5px 5px 5px;
width: 132px;
background: #fff;
}
.nav li .submenu
{
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-moz-box-shadow: 0 5px 5px #D3D3D3;
-webkit-box-shadow: 0 5px 5px #D3D3D3;
box-shadow: 0 5px 5px #D3D3D3;
}
.nav li .submenu li
{
float: none;
padding: 0;
background: none;
height:auto;
border-bottom:dotted 1px #BEBEBE;
}
.nav li .submenu li.last
{
border: none;
}
.nav li .submenu li a
{
float:none;
padding:0;
text-align:center;
height:28px;
line-height:28px;
background:none;
}
.nav li .submenu li a:hover
{
background:#ddd;
font-weight:800;
}
</style>
</head>
<body>
<script type="text/javascript">
function dropMenu(obj) {
$(obj).each(function () {
var theSpan = $(this);
var theMenu = theSpan.find(".submenu");
var tarHeight = theMenu.height();
theMenu.css({ height: 0, opacity: 0 });
theSpan.hover(
function () {
$(this).addClass("selected");
theMenu.stop().show().animate({ height: tarHeight, opacity: 1 }, 400);
},
function () {
$(this).removeClass("selected");
theMenu.stop().animate({ height: 0, opacity: 0 }, 400, function () {
$(this).css({ display: "none" });
});
}
);
});
}
$(document).ready(function () {
dropMenu(".drop-menu-effect");
});
</script>
<div class="navbox">
<div class="nav">
<ul class="clearfix">
<li><a class="selected" target="_blank" href="javascript:void(0);"><span>网站首页</span></a></li>
<li class="drop-menu-effect"><a target="_blank" href="javascript:void(0);"><span>内容管理</span></a>
<ul class="submenu">
<li><a href="#">普通文章</a></li>
<li><a href="#">专题文章</a></li>
<li><a href="#">材料文章</a></li>
</ul>
</li>
<li class="drop-menu-effect"><a target="_blank" href="javascript:void(0);"><span>系统帮助</span></a>
<ul class="submenu">
<li><a href="#">参考文档</a></li>
<li><a href="#">意见反馈</a></li>
<li><a href="#">官方交流论坛</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

您可能感兴趣的文章:

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

标签： js 菜单渐隐

相关文章推荐

新的分享

章节导航