本文實例講述了jquery實現的藍色二級導航條效果代碼。分享給大家供大家參考。具體如下：
這是一款網站導航條效果代碼，菜單最多可支持兩級，適合較多類型的網站使用，不喜歡藍色的可自己修改成其它顏色，整體效果不錯，挺簡單的網站導航。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-blue-2level-nav-style-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><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>css+jquery打造二級橫向菜單</title><style type="text/css" />#droplinebar {overflow: hidden;}.droplinebar ul{margin: 0;padding: 0;float: left;width: 100%;font: bold 14px Arial, Helvetica, sans-serif,微軟雅黑;text-align:center;background: #006b96 url(images/blueactive.gif) center center repeat-x;}.droplinebar ul li{display: inline;}.droplinebar ul li a{float: left;display: block;color: white;width: 127px;padding:11px 2px;text-decoration: none;}.droplinebar ul li a:visited{color: white;}.droplinebar ul li a:hover, .droplinebar ul li .current{color: white;background: transparent url(images/bluedefault.gif) center center repeat-x;padding:11px 2px;}.droplinebar ul li ul{position: absolute;z-index: 100;padding: 5px 0;top: 0;background: #006791;visibility: hidden;}.droplinebar ul li ul li a{font: bold 14px 微軟雅黑,Arial, Helvetica, sans-serif;padding:5px 0;margin: 0;}.droplinebar ul li ul li a:hover{background: #024662;}</style><script type="text/javascript" src="jquery-1.6.2.min.js"></script><script type="text/javascript">var droplinemenu={arrowimage: {classname: 'downarrowclass', src: 'images/down.gif', leftpadding: 5},animateduration: {over: 200, out: 100},buildmenu:function(menuid){ jQuery(document).ready(function($){ var $mainmenu=$("#"+menuid+">ul") var $headers=$mainmenu.find("ul").parent() $headers.each(function(i){ var $curobj=$(this) var $subul=$(this).find('ul:eq(0)') this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()} this.istopheader=$curobj.parents("ul").length==1? true : false if (!this.istopheader) $subul.css({left:0, top:this._dimensions.h}) var $innerheader=$curobj.children('a').eq(0) $innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader $innerheader.append( '<img src="'+ droplinemenu.arrowimage.src +'" class="' + droplinemenu.arrowimage.classname + '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />' ) $curobj.hover( function(e){ var $targetul=$(this).children("ul:eq(0)") if ($targetul.queue().length<=1) //if 1 or less queued animations if (this.istopheader) $targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h}) if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'}) $targetul.slideDown(droplinemenu.animateduration.over) }, function(e){ var $targetul=$(this).children("ul:eq(0)") $targetul.slideUp(droplinemenu.animateduration.out) } ) //end hover }) //end $headers.each() $mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()}) }) //end document.ready}}</script><script type="text/javascript">droplinemenu.buildmenu("mydroplinemenu")</script></head><body><div id="mydroplinemenu" class="droplinebar"><ul><li><a href="#" >網站首頁</a></li><li><a href="#" >網絡營銷教程</a><ul> <li><a href="#">基礎知識教程</a></li> <li><a href="#">課內實踐教程</a></li> <li><a href="#">專項實踐教程</a></li> <li><a href="#">畢業論文安排</a></li> </ul></li><li><a href="#" >Flash源碼</a></li><li><a href="#" >Photoshop教程</a><ul> <li><a href="#">基礎教程</a></li><li><a href="#">5步實例教程</a></li> <li><a href="#">文字與按鈕教程</a></li> <li><a href="#">圖片教程</a></li> <li><a href="#">筆刷等下載</a></li> <li><a href="#">源文件下載</a></li> <li><a href="#">字體下載</a></li> </ul></li><li><a href="#" >博客代碼</a><ul> <li><a href="#">博客大巴模板</a></li> <li><a href="#">博客大巴代碼</a></li> <li><a href="#">和訊博客代碼</a></li> </ul></li><li><a href="#" >網店經營</a></li><li><a href="#" >網絡營銷研究</a> </li></ul></div></body></html>希望本文所述對大家的jquery程序設計有所幫助。
新聞熱點
疑難解答
