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 相关文章推荐
改版了网上的一个js操作userdata
Apr 27 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
JavaScript前端面试组合函数
Jun 21 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带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
javascript 写类方式之四
2009/07/05 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
Python从MP3文件获取id3的方法
2015/06/15 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
在Python中使用Neo4j的方法
2019/03/14 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
python实现简单井字棋游戏
2020/03/04 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
介绍一下#error预处理
2015/09/25 面试题
班主任评语大全
2014/04/26 职场文书
六年级小学生评语
2014/12/26 职场文书