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 相关文章推荐
JavaScript 常用函数
Dec 30 Javascript
深入理解Javascript中的循环优化
Nov 09 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 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 strip_tags保留多个HTML标签的方法
2016/05/22 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
angular2使用简单介绍
2016/03/01 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
python查找第k小元素代码分享
2013/12/18 Python
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
python正则表达式re之compile函数解析
2017/10/25 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle