jquery动态菜单效果

这个我在网上看到的一位大牛写的jquery动态菜单，写的真好，我本来想学着自己写一个但是人家写的太好自己写的不行。所以今天我就把这个代码放上来供大家学习参考这位大牛写的代码注释也足够清楚大家可以细细研究。多余的话就不多说了，唉对了祝大家五一玩的开心！

<!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> <style> /*------------------------*/ #content { width: 760px; margin: 50px auto; margin-bottom:0; padding:20px 20px 40px; background: #FFF; border: 1px solid #CCC; } /*------------------------*/ .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.xh-css.cn/jquery/images/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.xh-css.cn/jquery/images/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://ajax.googleapis.com/ajax/libs/jquery/1.3/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="content"> <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>

提示：你可以先修改部分代码再运行。

标签: jquery动态菜单效果, jquery教程

发表于 jquery

0 comments 0 people listening

Comment help
Get Livefyre

Sort: Newest | Oldest

jquery动态菜单效果

站内搜索

热门文章

页面

最新评论

好站推荐

工具

常逛

标签

存档

功能