<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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(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(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="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>
<div id="header">
<div id="header_nav">
<div class="fleft">
<a class="top_home" title="首页" href="http://www.codefans.net/">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>这是一个演示页面，您可以点击 <a href="http://www.cnblogs.com/wiky/articles/animated-menu-0415.html">查看原文</a></p>
<hr />
<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>
<div id="footer">
<div class="fleft">Copyright © 2010 <a target="_blank" href="http://wiky.cnblogs.com/">Marco Wiky</a></div>
<div class="fright"><a target="_blank" href="http://wiky.cnblogs.com/">维奇-前端档案</a></div>
</div>
</body>
</html>
jQuery 黑色横向、纵向多级下拉菜单
5星 · 超过95%的资源 需积分: 3 114 浏览量
2010-04-30
10:26:38
上传
评论 2
收藏 25KB RAR 举报 
animated-menu 两款横向的jOuery动态下滑菜单.rar （5个子文件） 
codefans.net animated-menu 
bg_menu.gif 3KB bg_over.gif 4KB
style.css 1KB
animated-menu-0415.html 6KB jquery.min.js 56KB资源评论
s2438047372013-07-01很好用，很多效果都可以组装，很灵活
ntfs22013-07-25东西很好，效果不错，直接用- 11334442014-04-15很好用支持
atboys2013-06-28超好用的,支持!!
