css+jquery打造二级横向菜单

来源：互联网发布：买家如何开通淘宝客编辑：程序博客网时间：2024/05/05 18:37

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=gb2312">

<title>css+jquery打造二级横向菜单</title>

#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(blueactive.gif)center center repeat-x; /*default background of menu bar*/}

.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 ulli .current{ /*background of main menu bar links onMouseover*/

color: white;background: transparenturl(bluedefault.gif) center center repeat-x;padding:11px 2px;}

/* Sub level menus*/

.droplinebar ul li ul{

position: absolute;

z-index: 100;

padding: 5px 0;

top: 0;

background: #006791; /*sub menu backgroundcolor */

visibility: hidden;}

/* Sub level menu links style */

.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{ /*submenu links' background color onMouseover */

background: #024662;}

</style>

var droplinemenu={

arrowimage:{classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image

animateduration:{over: 200, out: 100}, //duration of slide in/ outanimation, in milliseconds

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 //if header contains inner SPAN, usethat

$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()})

}) //enddocument.ready

}

</script>

<scripttype="text/javascript">

//build menu with DIVID="myslidemenu" on page:

droplinemenu.buildmenu("mydroplinemenu")

</script>

</head>

<body>

<ul>

<li><ahref="http://www.duice.net/" >网络营销教程</a>

<ul>

<li><a href="http://www.duice.net">基础知识教程</a></li>

<li><a href="http://www.duice.net">课内实践教程</a></li>

<li><a href="http://www.duice.net">专项实践教程</a></li>

<li><ahref="http://www.szlsx.net/logs/41208172.html">毕业论文安排</a></li>

</ul>

</li>

<li><ahref="http://www.duice.net" >Flash源码</a></li>

<li><a href="http://www.duice.net">Photoshop教程</a>

<ul>

<li><ahref="http://www.szlsx.net/logs/41467119.html">5步实例教程</a></li>

<li><ahref="http://www.szlsx.net/logs/41461836.html">文字与按钮教程</a></li>

<li><ahref="http://www.szlsx.net/logs/41473950.html">笔刷等下载</a></li>

<li><ahref="http://www.szlsx.net/logs/43794097.html">源文件下载</a></li>

</ul>

</li>

<ul>

<li><ahref="http://www.szlsx.net/logs/44266485.html">博客大巴模板</a></li>

<li><ahref="http://www.szlsx.net/logs/42606243.html">博客大巴代码</a></li>

<li><a href="http://www.szlsx.net/logs/42606640.html">和讯博客代码</a></li>

　</ul>

</li>

<li><ahref="http://www.duice.net/" >网络营销研究</a> </li>

</ul>

</div>

</body>

</html>