jQuery实现导航回弹效果

时间：2021-05-26

效果图：

代码如下：

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="http:///js/move.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{margin:0;padding:0;} .box{width:1100px ;height: 70px;margin: 100px auto;background: hotpink;padding: 0 0 0 200px;box-sizing: border-box;} .nav {float: left;height: 70px;line-height: 55px;position: relative;cursor: pointer;} .nav-now{background: url(images/nav_now_bg.png)center 50px no-repeat;} .nav h1{font-size: 24px;} .box .nav+.nav{margin-left: 50px;} .box .nav span{width: 25px;height: 25px;position: absolute;background: url(images/nav_xiajiantou.png)center no-repeat;top: 15px;right: -35px;} .nav ul{position: absolute;background: hotpink;width: 160px;top: 70px;left: -15px;display: none;} .nav ul li{list-style: none;line-height: normal;padding: 10px 0 10px 20px;cursor: pointer;transition:padding-left 0.5s ease; } .nav ul li:hover{background: yellowgreen url(images/nav_li_bg.png)142px center no-repeat;padding-left:35px ;} .nav:hover{background: url(images/nav_now_bg.png)center 50px no-repeat;} </style> </head> <body> <div class="box"> <div class="nav has-nav nav-now"> <h1>一级菜单</h1> <span></span> <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </div> <div class="nav has-nav"> <h1>一级菜单</h1> <span></span> <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </div> <div class="nav has-nav"> <h1>一级菜单</h1> <span></span> <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </div> <div class="nav"> <h1>一级菜单</h1> </div> </div> </body> <script> $(function(){ $(".has-nav").hover(function(){ $(this).find('ul').slideDown(600,"elasticOut"); },function(){ $(this).find('ul').stop().slideUp(100); }); $(".nav").click(function(){ $(this).addClass("nav-now").siblings().removeClass("nav-now") }) }) </script></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章