jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码


Posted in Javascript onAugust 24, 2015

本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码。分享给大家供大家参考。具体如下:

这里介绍的是一款黑红带渐变的网站下滑导航菜单,基于jquery实现的下滑线导航菜单,鼠标经过主菜单的时候,下滑线就会自动跟向哪里,如果该菜单有两级子菜单,则同样会显示下滑菜单,带渐变效果。菜单操作很灵敏,使用有自定义的封装插件SuperSlide.2.1.js,所在使用时请自行下载这个JS插件。

运行效果截图如下:

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>jQuery带下划线导航菜单</title>
<style>
*{margin: 0;padding: 0;list-style: none;}
body{background: #fff;font-size: 12px;}
img{border: 0;}
a{text-decoration: none;color: #333;}
a: hover{color: #FF8400;}
.clearfix: after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix10: after{content: ".";display: block;height: 10px;clear: both;visibility: hidden;}
.h10{height: 10px;}
.h15{height: 15px;}
#header{width: 1000px;margin: 0 auto;}
.navBar{width: 1000px;margin: 0 auto;height: 50px;line-height: 50px;background: #000;color: #333;}
.nav{position: relative;width: 980px;margin: 0 auto;font-family: "Microsoft YaHei",SimSun,SimHei;font-size: 14px;}
.nav a{color: #fff;}
.nav h3{font-size: 100%;font-weight: normal;}
.nav .m{float: left;position: relative;z-index: 1;}
.nav .s{float: left;width: 3px;text-align: center;color: #D4D4D4;font-size: 12px;}
.nav h3 a{display: block;width: 115px;text-align: center;font-weight: bold;}
.nav .sub{display: none;position: absolute;left: -3px;top: 50px;z-index: 1;width: 117px;border: 1px solid #E6E4E3;border-top: 0;background: #fff;}
.nav .sub li{text-align: center;padding: 0 8px;margin-bottom: -1px;}
.nav .sub li a{display: block;border-bottom: 1px solid #E6E4E3;padding: 8px 0;height: 28px;line-height: 28px;color: #000;font-size: 12px;font-weight: bold;}
.nav .sub li a: hover{color: #FE7700;}
.nav .block{height: 8px;width: 120px;background: #FE7700;position: absolute;left: 0;top: 42px;overflow: hidden;}
</style>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
</head>
<body>
<br>
<div class="navBar">
 <ul class="nav clearfix">
  <li class="m">
  <h3><a target="_blank" href="#">网站首页</a></h3>
  </li>
  <li class="s">|</li>
  <li class="m">
  <h3><a target="_blank" href="#" title="关于我们">关于我们</a></h3>
  <ul class="sub">
   <li><a href="" title="企业简介">企业简介</a></li>
   <li><a href="" title="组织架构">组织架构</a></li>
   <li><a href="" title="企业资质">企业资质</a></li>
   <li><a href="" title="企业文化">企业文化</a></li>
  </ul>
  </li>
  <li class="s">|</li>
  <li class="m">
  <h3><a target="_blank" href="#">资质认定</a></h3>
  <ul class="sub">
   <li><a href="" title="国家高新认证">国家高新认证</a></li>
   <li><a href="" title="软件企业认证">软件企业认证</a></li>
   <li><a href="" title="深圳市高企认证">深圳市高企认证</a></li>
   <li><a href="" title="其它认证">其它认证</a></li>
  </ul>
  </li>
  <li class="s">|</li>
  <li class="m">
  <h3><a target="_blank" href="#">政府扶持</a></h3>
  <ul class="sub" style="display: none;">
   <li><a href="" title="深圳市级扶持">深圳市扶持</a></li>
   <li><a href="" title="各区级扶持">各区级扶持</a></li>
   <li><a href="" title="广东省级扶持">广东省扶持</a></li>
   <li><a href="" title="国家和部级扶持">国家扶持</a></li>
  </ul>
  </li>
  <li class="s">|</li>
  <li class="m">
  <h3><a target="_blank" href="#" title="知识产权">知识产权</a></h3>
  <ul class="sub" style="display: none;">
   <li><a href="" title="知识产权申请">知识产权申请</a></li>
   <li><a href="" title="知识产权转让">知识产权转让</a></li>
   <li><a href="" title="技术咨询">技术咨询</a></li>
   <li><a href="" title="技术成果鉴定">技术成果鉴定</a></li>
  </ul>
  </li>
  <li class="s">|</li>
  <li class="m">
  <h3><a target="_blank" href="#" title="上市服务">上市服务</a></h3>
  <ul class="sub" style="display: none;">
   <li><a href="" title="上市条件及流程">上市条件及流程</a></li>
   <li><a href="" title="上市顾问">上市顾问</a></li>
   <li><a href="" title="税收筹划">税收筹划</a></li>
   <li><a href="" title="资产重组">资产重组</a></li>
  </ul>
  </li>
  <li class="s">|</li>
  <li class="m">
  <h3><a target="_blank" href="Job.aspx" title="人才招聘">人才招聘</a></h3>
  </li>
  <li class="s">|</li>
  <li class="m">
  <h3><a target="_blank" href="Contact.aspx" title="联系我们">联系我们</a></h3>
  </li>
  <li class="block" style="left: 251px;"></li>
 </ul>
</div>
<script type="text/javascript" src="js/SuperSlide.2.1.js"></script>
<script type="text/javascript">
$(function(){
 var nav = $(".nav");
 var init = $(".nav .m").eq(ind);
 var block = $(".nav .block");
 block.css({
 "left": init.position().left - 3
 });
 nav.hover(function() {},
 function() {
 block.stop().animate({
  "left": init.position().left - 3
 },
 100);
 });
 $(".nav").slide({
 type: "menu",
 titCell: ".m",
 targetCell: ".sub",
 delayTime: 300,
 triggerTime: 0,
 returnDefault: true,
 defaultIndex: ind,
 startFun: function(i, c, s, tit) {
  block.stop().animate({
  "left": tit.eq(i).position().left - 3
  },
  100);
 }
 });
});
var ind = 0;
//设置
myFocus.set({
 id:'myFocus',//ID
 pattern:'mF_quwan'//风格
});
</script>
<div style="text-align:center;margin:300px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
javascript插入样式实现代码
Feb 22 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 #Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 #Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 #Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 #Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 #Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 #Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 #Javascript
You might like
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
python利用微信公众号实现报警功能
2018/06/10 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
python实现QQ批量登录功能
2019/06/19 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
python 从list中随机取值的方法
2020/11/16 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
中专生自荐信
2013/10/12 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js