焦点图|相册效果|页面布局|图片代码|导航菜单|TAB选项卡|弹出提示|客服代码|播放器|返回顶部|表单按钮|滚动代码|其他代码|
当前位置：首页 > 特效 > 导航菜单 > 正文

jQuery鼠标跟随渐变显示二级下拉导航代码
栏目分类：导航菜单   发布日期：2014-08-18   来源：   浏览次数：次

jQuery鼠标跟随渐变显示二级下拉导航代码
jQuery鼠标跟随渐变显示二级下拉导航代码,鼠标划过任意栏目当前样式跟随滑动，并下拉出二级栏目！

调用文件
  1. "css/style.css" rel="stylesheet" type="text/css" /> 
  2. <script src= type="text/javascript"></script> 
  3. <script type= src="js/SuperSlide.2.1.js"></script> 
  4. <script type=> 
  5. $(function(){ 
  6.     var nav = $(".nav"); 
  7.     var init = $(".nav .m").eq(ind); 
  8.     var block = $(".nav .block"); 
  9.     block.css({ 
  10.         "left": init.position().left - 3 
  11.     }); 
  12.     nav.hover(function() {}, 
  13.     function() { 
  14.         block.stop().animate({ 
  15.             "left": init.position().left - 3 
  16.         }, 
  17.         100); 
  18.     }); 
  19.     $(".nav").slide({ 
  20.         type: "menu", 
  21.         titCell: ".m", 
  22.         targetCell: ".sub", 
  23.         delayTime: 300, 
  24.         triggerTime: 0, 
  25.         returnDefault: true, 
  26.         defaultIndex: ind, 
  27.         startFun: function(i, c, s, tit) { 
  28.             block.stop().animate({ 
  29.                 "left": tit.eq(i).position().left - 3 
  30.             }, 
  31.             100); 
  32.         } 
  33.     }); 
  34. }); 
  35. var ind = 0; 
  36. </script> 

代码

  1. <div class="navBar"> 
  2.     <ul class="nav clearfix"> 
  3.         <li class="m"> 
  4.         <h3><a target="_blank" href="http://www.juheweb.com">网站首页</a></h3> 
  5.         </li> 
  6.         <li class="s">|</li> 
  7.         <li class="m"> 
  8.         <h3><a target="_blank" href="http://www.juheweb.com" title="关于我们">关于我们</a></h3> 
  9.         <ul class="sub"> 
  10.             <li><a href="http://www.juheweb.com" title="企业简介">企业简介</a></li> 
  11.             <li><a href="http://www.juheweb.com" title="组织架构">组织架构</a></li> 
  12.             <li><a href="http://www.juheweb.com" title="企业资质">企业资质</a></li> 
  13.             <li><a href="http://www.juheweb.com" title="企业文化">企业文化</a></li> 
  14.         </ul> 
  15.         </li> 
  16.         <li class="s">|</li> 
  17.         <li class="m"> 
  18.         <h3><a target="_blank" href="http://www.juheweb.com">资质认定</a></h3> 
  19.         <ul class="sub"> 
  20.             <li><a href="http://www.juheweb.com" title="国家高新认证">国家高新认证</a></li> 
  21.             <li><a href="http://www.juheweb.com" title="软件企业认证">软件企业认证</a></li> 
  22.             <li><a href="http://www.juheweb.com" title="深圳市高企认证">深圳市高企认证</a></li> 
  23.             <li><a href="http://www.juheweb.com" title="其它认证">其它认证</a></li> 
  24.         </ul> 
  25.         </li> 
  26.         <li class="s">|</li> 
  27.         <li class="m"> 
  28.         <h3><a target="_blank" href="http://www.juheweb.com">政府扶持</a></h3> 
  29.         <ul class="sub" style="display: none;"> 
  30.             <li><a href="http://www.juheweb.com" title="深圳市级扶持">深圳市级扶持</a></li> 
  31.             <li><a href="http://www.juheweb.com" title="各区级扶持">各区级扶持</a></li> 
  32.             <li><a href="http://www.juheweb.com" title="广东省级扶持">广东省级扶持</a></li> 
  33.             <li><a href="http://www.juheweb.com" title="国家和部级扶持">国家和部级扶持</a></li> 
  34.         </ul> 
  35.         </li> 
  36.         <li class="s">|</li> 
  37.         <li class="m"> 
  38.         <h3><a target="_blank" href="http://www.juheweb.com" title="知识产权">知识产权</a></h3> 
  39.         <ul class="sub" style="display: none;"> 
  40.             <li><a href="http://www.juheweb.com" title="知识产权申请">知识产权申请</a></li> 
  41.             <li><a href="http://www.juheweb.com" title="知识产权转让">知识产权转让</a></li> 
  42.             <li><a href="http://www.juheweb.com" title="技术咨询">技术咨询</a></li> 
  43.             <li><a href="http://www.juheweb.com" title="技术成果鉴定">技术成果鉴定</a></li> 
  44.         </ul> 
  45.         </li> 
  46.         <li class="s">|</li> 
  47.         <li class="m"> 
  48.         <h3><a target="_blank" href="http://www.juheweb.com" title="上市服务">上市服务</a></h3> 
  49.         <ul class="sub" style="display: none;"> 
  50.             <li><a href="http://www.juheweb.com" title="上市条件及流程">上市条件及流程</a></li> 
  51.             <li><a href="http://www.juheweb.com" title="上市顾问">上市顾问</a></li> 
  52.             <li><a href="http://www.juheweb.com" title="税收筹划">税收筹划</a></li> 
  53.             <li><a href="http://www.juheweb.com" title="资产重组">资产重组</a></li> 
  54.         </ul> 
  55.         </li> 
  56.         <li class="s">|</li> 
  57.         <li class="m"> 
  58.         <h3><a target="_blank" href="Job.aspx" title="人才招聘">人才招聘</a></h3> 
  59.         </li> 
  60.         <li class="s">|</li> 
  61.         <li class="m"> 
  62.         <h3><a target="_blank" href="Contact.aspx" title="联系我们">联系我们</a></h3> 
  63.         </li> 
  64.         <li class="block" style="left: 251px;"></li> 
  65.     </ul> 
  66. </div> 

立即下载 浏览效果

相关热词：jQuery导航导航代码鼠标跟随

上一篇：2款具有滑动效果的导航代码
一款CSS3可展开折叠左侧边栏菜单jQuery插件：下一篇
相关下载
大家都在下载
一款CSS3可展开折叠左侧边栏菜单jQuery插件

类别：导航菜单

jquery商城左侧分类菜单导航

类别：导航菜单

两款js带动画效果的扇形折叠菜单Circular Na

类别：导航菜单

jquery模拟iMac苹果系统菜单效果

类别：导航菜单

jquery的左侧展开菜单导航

类别：导航菜单

热门关键词
图片放大镜 焦点图插件 Guiders 电脑 jQuery插件 Awesome discuzx插件 asp js左右滑动焦点图 IE6 表单元素美化 3D功能 Dreamweaver教程 Illustrator dedecms 疯狂“90后” 图片滚动 网页 记忆 浮动气泡 带缩略图 文本输入 产品放大镜 word临时文件 服务器 js轮播图 弹出层 横向滚动js代码 网站加载Loading进度条 左侧菜单
这些是最新的

关于聚合分享

聚合分享整合国内外优质的资源，内容涉及js效果代码，平面设计教程，网页设计教程，cms建站，网页模版等领域，提供最新的行业资讯，设计教程和素材参考学习。

版权声明

声明：本站发布的资源均来自互联网，仅供交流学习之用，请勿作商业用途，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！
本站为原创网站其他源码均为仿制。如有意购买本站模板请联系本站管理员QQ:774780837

Copyright © 2014 聚合分享 版权所有   京ICP备14037269号-1  关于聚合分享 | 广告合作 | 版权声明 | 意见反馈 | 联系方式 | 原创投稿 | 网站地图 | 友情链接
焦点图相册效果页面布局图片代码导航菜单TAB选项卡弹出提示客服代码播放器返回顶部表单按钮滚动代码其他代码