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 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
js实现日历与定时器
Feb 22 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 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中计算字符串相似度的函数代码
2012/12/29 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
利用Python爬虫给孩子起个好名字
2017/02/14 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
python操作链表的示例代码
2020/09/27 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
Linux如何压缩可执行文件
2013/10/21 面试题
Java servlet面试题
2012/03/04 面试题
应届毕业生就业自荐信
2013/10/26 职场文书
卖房协议书
2014/04/11 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
学习十八大的心得体会
2014/09/12 职场文书
山楂树之恋观后感
2015/06/11 职场文书
golang 实现Location跳转方式
2021/05/02 Golang