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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
Vue.js对象转换实例
Jun 07 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 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代码
2007/03/08 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
用js实现随机返回数组的一个元素
2007/08/13 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
easy_install python包安装管理工具介绍
2013/02/10 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
Python与R语言的简要对比
2017/11/14 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
写好自荐信的技巧
2013/11/08 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
总经理助理岗位职责
2015/01/31 职场文书
离婚律师函范本
2015/05/27 职场文书
运动会运动员赞词
2015/07/22 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
创业计划书之花店
2019/09/20 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android