jquery實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示下劃線的漸變下拉菜單效果代碼

更新時(shí)間：2015年08月24日 17:48:55 作者：企鵝

這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示下劃線的漸變下拉菜單效果代碼,涉及jquery插件SuperSlide.2.1.js實(shí)現(xiàn)滑動(dòng)切換效果的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示下劃線的漸變下拉菜單效果代碼。分享給大家供大家參考。具體如下：

這里介紹的是一款黑紅帶漸變的網(wǎng)站下滑導(dǎo)航菜單，基于jquery實(shí)現(xiàn)的下滑線導(dǎo)航菜單，鼠標(biāo)經(jīng)過主菜單的時(shí)候，下滑線就會(huì)自動(dòng)跟向哪里，如果該菜單有兩級(jí)子菜單，則同樣會(huì)顯示下滑菜單，帶漸變效果。菜單操作很靈敏，使用有自定義的封裝插件SuperSlide.2.1.js，所在使用時(shí)請(qǐng)自行下載這個(gè)JS插件。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/jquery-mouse-over-buttom-line-show-menu-codes/

具體代碼如下：

<!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帶下劃線導(dǎo)航菜單</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="#">網(wǎng)站首頁</a></h3>
  </li>
  <li class="s">|</li>
  <li class="m">
  <h3><a target="_blank" href="#" title="關(guān)于我們">關(guān)于我們</a></h3>
  <ul class="sub">
   <li><a href="" title="企業(yè)簡介">企業(yè)簡介</a></li>
   <li><a href="" title="組織架構(gòu)">組織架構(gòu)</a></li>
   <li><a href="" title="企業(yè)資質(zhì)">企業(yè)資質(zhì)</a></li>
   <li><a href="" title="企業(yè)文化">企業(yè)文化</a></li>
  </ul>
  </li>
  <li class="s">|</li>
  <li class="m">
  <h3><a target="_blank" href="#">資質(zhì)認(rèn)定</a></h3>
  <ul class="sub">
   <li><a href="" title="國家高新認(rèn)證">國家高新認(rèn)證</a></li>
   <li><a href="" title="軟件企業(yè)認(rèn)證">軟件企業(yè)認(rèn)證</a></li>
   <li><a href="" title="深圳市高企認(rèn)證">深圳市高企認(rèn)證</a></li>
   <li><a href="" title="其它認(rèn)證">其它認(rèn)證</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="深圳市級(jí)扶持">深圳市扶持</a></li>
   <li><a href="" title="各區(qū)級(jí)扶持">各區(qū)級(jí)扶持</a></li>
   <li><a href="" title="廣東省級(jí)扶持">廣東省扶持</a></li>
   <li><a href="" title="國家和部級(jí)扶持">國家扶持</a></li>
  </ul>
  </li>
  <li class="s">|</li>
  <li class="m">
  <h3><a target="_blank" href="#" title="知識(shí)產(chǎn)權(quán)">知識(shí)產(chǎn)權(quán)</a></h3>
  <ul class="sub" style="display: none;">
   <li><a href="" title="知識(shí)產(chǎn)權(quán)申請(qǐng)">知識(shí)產(chǎn)權(quán)申請(qǐng)</a></li>
   <li><a href="" title="知識(shí)產(chǎn)權(quán)轉(zhuǎn)讓">知識(shí)產(chǎn)權(quán)轉(zhuǎn)讓</a></li>
   <li><a href="" title="技術(shù)咨詢">技術(shù)咨詢</a></li>
   <li><a href="" title="技術(shù)成果鑒定">技術(shù)成果鑒定</a></li>
  </ul>
  </li>
  <li class="s">|</li>
  <li class="m">
  <h3><a target="_blank" href="#" title="上市服務(wù)">上市服務(wù)</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="資產(chǎn)重組">資產(chǎn)重組</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="聯(lián)系我們">聯(lián)系我們</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;
//設(shè)置
myFocus.set({
 id:'myFocus',//ID
 pattern:'mF_quwan'//風(fēng)格
});
</script>
<div style="text-align:center;margin:300px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: