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>

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

(0)

相关推荐

  • jquery实现固定顶部导航效果(仿蘑菇街)

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jquery 面包屑导航 具体实现

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>YanCms

  • jQuery实现的导航下拉菜单效果示例

    本文实例讲述了jQuery实现的导航下拉菜单效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

  • JQuery实现鼠标滑过显示导航下拉列表

    当网站导航栏项目很多的时候,我们往往是将同一级目录下的栏目先隐藏起来.当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表.小编一步步给大家讲解.值得注意的是我们使用的是Javascript的一个框架Jquery来实现的.所以,你在使用的时候必须要下载Jquery. 先建立HTML代码 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="

  • JQuery 浮动导航栏实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

  • 简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none" rel="external nofollow" rel="external nofollow" rel="external

  • Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例

    解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: <script type="text/javascript" src="templets/js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function

  • jQuery点击导航栏选中更换样式的实现代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit

  • jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

    在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下: 复制代码 代码如下: <ul> <li><a href="#">baidu</a></li> <div

  • jQuery网页定位导航特效实现方法

    本文实例讲述了jQuery网页定位导航特效实现方法.分享给大家供大家参考,具体如下: 描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离(相对于顶部),如果滚动距离大于等于楼层距离,即进入了相应楼层,然后通过一个变量来记录该楼层的信息,最后传递给右边高亮显示 1.点击右边固定导航项时,左边的内容跟着切换. 只需将右边a的href设置为左边区块的id加

随机推荐