jquery 导航菜单 下拉菜单



jquery 导航菜单 下拉菜单

thanka a lot for :http://www.51xuediannao.com/js/nav/navlevel2.html

 

 

效果：

 

 

代码:

<scriptsrc=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”type=”text/javascript”></script>

<scripttype=”text/javascript”>

$(document).ready(function(){

jQuery.navlevel2 = function(level1,dytime) {

 

$(level1).mouseenter(function(){

varthis = $(this);

delytime=setTimeout(function(){

varthis.find(‘ul’).slideDown();

},dytime);

 

});

$(level1).mouseleave(function(){

clearTimeout(delytime);

$(this).find(‘ul’).slideUp();

});

 

};

$.navlevel2(“li.mainlevel”,500);

});

</script>

<styletype=”text/css”>

html,body,ul,li{padding:0; margin:0;}

body {font:12px/normalVerdana, Arial, Helvetica, sans-serif; padding:50px;}

ul,li {list-style-type:none; text-transform:capitalize;}

/*menu*/

#nav { display:block;}

#nav.mainlevel {background:#164C3F; float:left; border-right:1pxsolid#fff; width:140px;/*IE6 only*/}

#nav.mainlevela {color:#ffffff; text-decoration:none; line-height:32px; display:block; padding:020px; width:100px;}

#nav.mainlevela:hover {color:#fff; text-decoration:none;}

#nav.mainlevelul {display:none; position:absolute;}


#nav.mainlevelli {border-top:1pxsolid#fff; background:#164C3F; width:140px;/*IE6 only*/}

</style>

</head>

 

<body>

<ulid=”nav”>

<liclass=”mainlevel”><ahref=”http://www.51xuediannao.com/js/”>jquery特效</a>

<ul>

<li><ahref=”http://www.51xuediannao.com/js/texiao/”>网页特效</a></li>

<li><ahref=”http://www.51xuediannao.com/js/nav/”>导航菜单</a></li>

<li><ahref=”http://www.51xuediannao.com/js/slide/”>焦点幻灯片</a></li>

<li><ahref=”http://www.51xuediannao.com/qqkefu/”>qq在线客服代码</a></li>

<li><ahref=”http://www.51xuediannao.com/xuanxiangka/”>选项卡代码</a></li>

</ul>

</li>

 

<liclass=”mainlevel”><ahref=”http://www.51xuediannao.com/js/”>jquery特效</a>

<ul>

<li><ahref=”http://www.51xuediannao.com/js/texiao/”>网页特效</a></li>

<li><ahref=”http://www.51xuediannao.com/js/nav/”>导航菜单</a></li>

<li><ahref=”http://www.51xuediannao.com/js/slide/”>焦点幻灯片</a></li>

<li><ahref=”http://www.51xuediannao.com/qqkefu/”>qq在线客服代码</a></li>

<li><ahref=”http://www.51xuediannao.com/xuanxiangka/”>选项卡代码</a></li>

</ul>

</li>

 

<liclass=”mainlevel”><ahref=”http://www.51xuediannao.com/js/”>jquery特效</a>

<ul>

<li><ahref=”http://www.51xuediannao.com/js/texiao/”>网页特效</a></li>

<li><ahref=”http://www.51xuediannao.com/js/nav/”>导航菜单</a></li>

<li><ahref=”http://www.51xuediannao.com/js/slide/”>焦点幻灯片</a></li>

<li><ahref=”http://www.51xuediannao.com/qqkefu/”>qq在线客服代码</a></li>

<li><ahref=”http://www.51xuediannao.com/xuanxiangka/”>选项卡代码</a></li>

</ul>

</li>

 

</ul>