基本效果是这样的~~
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>
- </title>
- <style type="text/CSS">
- * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width: 330px;
- height: 30px; margin: 100px auto 0; padding-left: 10px; background-color:
- skyblue; } .wrap li { background-color: skyblue; } .wrap > ul > li { float:
- left; margin-right: 10px; position: relative; } .wrap a { display: block;
- height: 30px; width: 100px; text-decoration: none; color: #000; line-height:
- 30px; text-align: center; } .wrap li ul { position: absolute; top: 30px;
- display: none; }
- </style>
- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
- </script>
- <script>
- $(function() {
- //获取所有li,添加移入事件
- $(".wrap>ul>li").mouseenter(function() {
- //设置内部的子元素ul slideDown
- $(this).children("ul").stop().slideDown(600);
- });
- //移出li时,让内部子元素slideUp
- $(".wrap>ul>li").mouseleave(function() {
- $(this).children("ul").stop().slideUp(600);
- });
- //如果当前运动没有完毕,又添加了新的动画,这时新的动画需要等待当前动画执行完毕才会开始
- //如果持续添加。一定会造成动画的积累,这种情况我们称为动画队列
- });
- </script>
- </head>
- <body>
- <div class="wrap">
- <ul>
- <li>
- <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow">
- 一级菜单1
- </a>
- <ul class="ul">
- <li>
- <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow">
- 二级菜单11
- </a>
- </li>
- <li>
- <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow">
- 二级菜单12
- </a>
- </li>
- <li>
- <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow">
- 二级菜单13
- </a>
- </li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow">
- 一级菜单2
- </a>
- <ul>
- <li>
- <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow">
- 二级菜单21
- </a>
- </li>
- <li>
- <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow">
- 二级菜单22
- </a>
- </li>
- <li>
- <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow">
- 二级菜单23
- </a>
- </li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow">
- 一级菜单3
- </a>
- <ul>
- <li>
- <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow">
- 二级菜单31
- </a>
- </li>
- <li>
- <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow">
- 二级菜单32
- </a>
- </li>
- <li>
- <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" rel="external nofollow" rel="external nofollow"
- rel="external nofollow">
- 二级菜单33
- </a>
- </li>
- </ul>
- </li>
- </ul>
- </div>
- </body>
- </html>
以上所述是小编给大家介绍的 jQuery 实现下拉菜单的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/116514.htm