本文实例讲述了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程序设计有所帮助。
新闻热点
疑难解答
