欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Jquery實(shí)現(xiàn)帶動(dòng)畫(huà)效果的經(jīng)典二級(jí)導(dǎo)航菜單

 更新時(shí)間：2013年03月22日 17:06:47   作者：  
導(dǎo)航菜單在網(wǎng)頁(yè)中呈現(xiàn)的頻率還是比較多的，因?yàn)樾Ч喈?dāng)不錯(cuò),接下來(lái)為大家介紹下使用jquery實(shí)現(xiàn)經(jīng)典二級(jí)導(dǎo)航菜單，各位童鞋們快來(lái)圍觀哦
導(dǎo)航菜單比較實(shí)用，當(dāng)然還是選擇經(jīng)典的，代碼最少的，效果最好的嘍，各位童鞋請(qǐng)圍觀哦，廢話不說(shuō)，
效果圖如下，歡迎評(píng)價(jià)：

看代碼：
復(fù)制代碼 代碼如下:

<!DOCTYPE html >
<html>
<head>
<title>一款帶動(dòng)畫(huà)效果的經(jīng)典二級(jí)導(dǎo)航菜單Jquery特效</title>
<meta name="author" content="Jquery" />
<meta name="keywords" content="Jquery,Jquery資源,前端設(shè)計(jì),div+css" />
<style>
html, body, ul, li, h1, h2, h3, h4, h5, h6, fieldset, legend {padding:0; margin:0;}
body {font:12px/normal Verdana, Arial, Helvetica, sans-serif;}
ul,li {list-style-type:none; text-transform:capitalize;}
clear{clear:both;height:0;font-size: 1px;line-height: 0px;}//清除浮動(dòng)哦
/*menu*/
#nav {margin:0 auto 60px; width:1080px; display:block;}
mainlevel {background:#ffe60c; float:left; border-right:1px solid #fff; width:140px;}
mainlevel a {color:#000; text-decoration:none; line-height:32px; display:block; padding:0 20px; width:100px; font-weight:bold;}
mainlevel a:hover {color:#fff; text-decoration:none; background:#062723 0 0; font-weight:bold;}
mainlevel ul {display:none; position:absolute;}
mainlevel li {border-top:1px solid #fff; background:#ffe60c; width:140px;font-weight:bold;}
</style>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript" >
$(function(){
$('li.mainlevel').hover(function(){
$(this).find('ul').slideDown(500);//鼠標(biāo)滑過(guò)找到當(dāng)前的UL，向下滑出顯示子菜單
},function(){
$(this).find('ul').stop(true,false).slideUp("fast");
});
});
</script>
</head>
<body>
<ul id="nav">
<li class="mainlevel"><a target="_blank">Jquery插件</a>
<ul >
<li><a target="_blank">JavaScript</a></li>
<li><a target="_blank">jQuery</a></li>
<li><a target="_blank">slideUp</a></li>
<li><a target="_blank">slideDown</a></li>
<li><a target="_blank">up and down</a></li>
<li><a target="_blank">animate</a></li>
</ul>
</li>
<li class="mainlevel"><a target="_blank">Jquery資源</a>
<ul>
<li><a target="_blank">JavaScript</a></li>
<li><a target="_blank">jQuery</a></li>
<li><a target="_blank">slideUp</a></li>
<li><a target="_blank">slideDown</a></li>
<li><a target="_blank">up and down</a></li>
<li><a target="_blank">animate</a></li>
</ul>
</li>
<li class="mainlevel"><a target="_blank">Jquery特效</a>
<ul id="sub_03">
<li><a target="_blank">JavaScript</a></li>
<li><a target="_blank">jQuery</a></li>
<li><a target="_blank">slideUp</a></li>
<li><a target="_blank">slideDown</a></li>
<li><a target="_blank">up and down</a></li>
<li><a target="_blank">animate</a></li>
</ul>
</li>
<li class="mainlevel" ><a target="_blank">Jquery學(xué)堂</a>
<ul >
<li><a target="_blank">JavaScript</a></li>
<li><a target="_blank">jQuery</a></li>
<li><a target="_blank">slideUp</a></li>
<li><a target="_blank">slideDown</a></li>
<li><a target="_blank">up and down</a></li>
<li><a target="_blank">animate</a></li>
</ul>
</li>
<li class="mainlevel" ><a target="_blank">分享快樂(lè)</a>
<ul >
<li><a target="_blank">JavaScript</a></li>
<li><a target="_blank">jQuery</a></li>
<li><a target="_blank">slideUp</a></li>
<li><a target="_blank">slideDown</a></li>
<li><a target="_blank">up and down</a></li>
<li><a target="_blank">animate</a></li>
</ul>
</li>
<div class="clear"></div>
</ul>
</body>
</html>

相關(guān)文章

最新評(píng)論