结果如下:
代码如下:
<!doctype html>
<!-- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jOuery:动态下滑菜单</title>
<link rel="stylesheet" href="style.css" />
<style>
.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(image/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(image/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;
}
body {
background: #F2F2F2;
font: 12px/1.5 Verdana,'ËÎÌå',tahoma, Srial, helvetica, sans-serif;
margin:0;
padding:0;
}
a {
font-size:12px;
color:#0F83DB;
text-decoration:none;
}
#header a:hover,#content p a:hover,#footer a:hover{
text-decoration:underline;
}
#header{
width:100%;
background: #666;
border-bottom:1px solid #FFF;
overflow:hidden;
height:32px;
}
#header_nav{
width:800px;
margin: 0px auto;
padding: 6px 0px;
}
#header a{
line-height:12px;
color: #FFF;
}
#header .top_home{
border-right: 1px solid #FFF;
padding-right: 6px;
margin-right: 2px;
}
.fleft{ display: inline; float:left;}
.fright{ display: inline; float:right;}
#content h1 {
margin: 0; color: #F60;
}
hr {
border: none;
height: 1px; line-height: 1px;
background: #CCC;
margin-bottom: 20px;
padding: 0;
}
p {
margin: 0;
padding: 7px 0;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.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>
<div id="header">
<div id="header_nav">
<div class="fleft">
<a class="top_home" title="首页" href="http://wiky.000a.biz/">HOME</a>
<a class="top_blog" title="博客" href="http://wiky.cnblogs.com/">BLOG</a>
</div>
<div class="fright">
<a class="top_about" title="关于作者" href="http://www.cnblogs.com/wiky/articles/about.html">ABOUT</a>
</div>
</div>
</div>
<div id="content">
<h1>jOuery动态下滑菜单</h1>
<p>完整版（背景图）示例</p><br/>
<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>
<p>简化版（无图片）示例</p><br/>
<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>