本文實例講述了jquery實現鼠標經過顯示下劃線的漸變下拉菜單效果代碼。分享給大家供大家參考。具體如下：
這里介紹的是一款黑紅帶漸變的網站下滑導航菜單，基于jquery實現的下滑線導航菜單，鼠標經過主菜單的時候，下滑線就會自動跟向哪里，如果該菜單有兩級子菜單，則同樣會顯示下滑菜單，帶漸變效果。菜單操作很靈敏，使用有自定義的封裝插件SuperSlide.2.1.js，所在使用時請自行下載這個JS插件。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/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帶下劃線導航菜單</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程序設計有所幫助。
新聞熱點
疑難解答
