jQuery实现导航回弹效果


Posted in Javascript onFebruary 27, 2017

效果图:

jQuery实现导航回弹效果

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="http://www.21kevin.com/js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="http://www.21kevin.com/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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript 命名空间以提高代码重用性
Nov 13 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
vue实现信息管理系统
May 30 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 Javascript
使用jQuery操作DOM的方法小结
Feb 27 #Javascript
jQuery模拟淘宝购物车功能
Feb 27 #Javascript
原生js实现轮播图
Feb 27 #Javascript
PHP实现本地图片上传和验证功能
Feb 27 #Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 #Javascript
提高Web性能的前端优化技巧总结
Feb 27 #Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 #Javascript
You might like
php 模拟POST提交的2种方法详解
2013/06/17 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
PHP实现验证码校验功能
2017/11/16 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
python 中的divmod数字处理函数浅析
2017/10/17 Python
error和exception有什么区别
2012/10/02 面试题
大学生学年自我鉴定
2014/02/10 职场文书
生日主持词
2014/03/20 职场文书
推荐信格式要求
2014/05/09 职场文书
保密工作目标责任书
2014/07/28 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
《落花生》教学反思
2016/02/16 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
nginx设置资源请求目录的方式详解
2022/05/30 Servers