<!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>程序爱好者www.phpfun.net</title>
<meta http-equiv="content-type" content="text/html;charset=utf8">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
body {
font-size: 12px;
}
.menu {
height: 45px;
display: block;
}.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
/* 菜单子元素的内容超出不可见 */
overflow: hidden;
position: relative;
text-align: center;
line-height: 45px;
}
.menu ul li a {
/* 必须是相对定位 */
position: relative;
display: block;
width: 110px;
height: 45px;
font-family: Arial;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
.menu ul li a span {
/* 所有层将使用绝对定位 */
position: absolute;
left: 0;
width: 110px;
}
.menu ul li a span.out {
top: 0px;
}
.menu ul li a span.over,
.menu ul li a span.bg {
/* 起初.over层和.bg层相对a元素-45px以达到隐藏 */
top: -45px;
}
/** 完整版示例 **/
#menu {
background:url(http://www.zzsky.cn/effect/images/201004180930/bg_menu.gif) scroll 0 -1px repeat-x;
border:1px solid #CCC;
}
#menu ul li a {
color: #000;
}
#menu ul li a span.over {
color: #FFF;
}
#menu ul li span.bg {
height: 45px;
background: url(http://www.zzsky.cn/effect/images/201004180930/bg_over.gif) center center no-repeat;
}
/** 简化版示例 **/
#menu2 {
background:#45A8DF;
}
#menu2 ul li a {
color:#FFF;
}
#menu2 ul li a span.over {
background: #A6DD00;
color:#333;
}
#menu2 ul li.nav1 a span.over {
background: #fea274;
}
#menu2 ul li.nav2 a span.over {
background: #b0bbba;
}
#menu2 ul li.nav3 a span.over {
background: #a3f091;
}
#menu2 ul li.nav4 a span.over {
background: #86dbf9;
}
#menu2 ul li.nav5 a span.over {
background: #e0caf0;
}
#menu2 ul li.nav6 a span.over {
background: #9dace9;
}
</style>
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {
/* 完整版示例 */
// 把每个a中的内容包含到一个层（span.out）中，在span.out层后面追加背景图层（span.bg）
$("#menu li a").wrapInner('<span class="out"></span>').append('<span class="bg"></span>');
// 循环为菜单的a每个添加一个层（span.over）
$("#menu li a").each(function() {
$('<span class="over">' + $(this).text() + '</span>').appendTo( this );
});
$("#menu li a").hover(function() {
// 鼠标经过时候被触发的函数
$(".out",this).stop().animate({'top':'45px'},250); // 向下滑动 - 隐藏
$(".over",this).stop().animate({'top':'0px'},250); // 向下滑动 - 显示
$(".bg",this).stop().animate({'top':'0px'}, 120); // 向下滑动 - 显示
}, function() {
// 鼠标移出时候被触发的函数
$(".out",this).stop().animate({'top':'0px'},250); // 向上滑动 - 显示
$(".over",this).stop().animate({'top':'-45px'},250); // 向上滑动 - 隐藏
$(".bg",this).stop().animate({'top':'-45px'},120); // 向上滑动 - 隐藏
});
/* 简化版示例 */
$("#menu2 li a").wrapInner('<span class="out"></span>');
$("#menu2 li a").each(function() {
$('<span class="over">' + $(this).text() + '</span>').appendTo( this );
});
$("#menu2 li a").hover(function() {
$(".out",this).stop().animate({'top':'45px'},200); // 向下滑动 - 隐藏
$(".over",this).stop().animate({'top':'0px'},200); // 向下滑动 - 显示
}, function() {
$(".out",this).stop().animate({'top':'0px'},200); // 向上滑动 - 显示
$(".over",this).stop().animate({'top':'-45px'},200); // 向上滑动 - 隐藏
});
});
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="content">
<h1>jOuery动态下滑菜单</h1>
<hr>
<p>完整版（背景图）示例</p>
<div id="menu" class="menu">
<ul>
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">HTML/CSS</a></li>
<li><a href="javascript:;">JavaScript</a></li>
<li><a href="javascript:;">Resources</a></li>
<li><a href="javascript:;">Tutorials</a></li>
<li><a href="javascript:;">About</a></li>
</ul>
</div>
<p>简化版（无图片）示例</p>
<div id="menu2" class="menu">
<ul>
<li class="nav1"><a href="javascript:;">Home</a></li>
<li class="nav2"><a href="javascript:;">HTML/CSS</a></li>
<li class="nav3"><a href="javascript:;">JavaScript</a></li>
<li class="nav4"><a href="javascript:;">Resources</a></li>
<li class="nav5"><a href="javascript:;">Tutorials</a></li>
<li class="nav6"><a href="javascript:;">About</a></li>
</ul>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号