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 相关文章推荐
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
JavaScript函数详解
Feb 27 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
node.js实现爬虫教程
Aug 25 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
详解js获取video任意时间的画面截图
Apr 17 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中调用其他系统http接口的方法说明
2014/02/28 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
javascript头像上传代码实例
2019/09/28 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Python3.8中使用f-strings调试
2019/05/22 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
Python定义函数实现累计求和操作
2020/05/03 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
信息工程学院毕业生推荐信
2013/11/05 职场文书
行政内勤岗位职责
2014/04/07 职场文书
人事任命书格式
2014/06/05 职场文书
学习十八大的心得体会
2014/09/01 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
八月迷情观后感
2015/06/11 职场文书