網(wǎng)頁(yè)特效代碼模板無(wú)憂>網(wǎng)頁(yè)特效>菜單導(dǎo)航特效代碼>

下拉菜單，點(diǎn)擊后拉出，而非滑過(guò)_菜單導(dǎo)航特效

一款別致、漂亮、操縱形式新奇的下拉菜單，一般的下拉菜單都是在鼠標(biāo)滑過(guò)的時(shí)候出現(xiàn)菜單，這一款則是在點(diǎn)擊后才激活下拉菜單，個(gè)人感覺(jué)這種比滑動(dòng)的更方便于用戶，讓用戶為所欲為的操縱，這是最重要的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>下拉菜單- / </title>
<style>
#outer {width:748px; height:300px; background:url(http://p1.mb5u.com/texiao/0/20100522230648221.jpg) no-repeat right bottom; border:1px solid #ddd; border-width:5px 1px 1px; position:relative;}
#menu {list-style-type:none; width:644px; padding:0; margin:0 auto;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#088; margin:1px 1px 0 0;position:relative;}
#menu li.sub {background:#f80;}
/*/*/
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:160px; text-decoration:none; text-align:center; cursor:pointer; font-weight:bold;}
#menu li:hover, #menu li a:hover {background:#c00;}
#menu ul {position:absolute;left:-9999px;width:128px;}
#menu li.click {background:#c00;}
#menu li.click ul{left:0; top:24px; 
</style>
<script type="text/javascript">
clickMenu = function(menu) {
	var getEls = document.getElementById(menu).getElementsByTagName("LI");
	var getAgn = getEls;

for (var i=0; i<getEls.length; i++) {
			getEls[i].onclick=function() {
				for (var x=0; x<getAgn.length; x++) {
				getAgn[x].className=getAgn[x].className.replace("unclick", "");
				getAgn[x].className=getAgn[x].className.replace("click", "unclick");
				}
			if ((this.className.indexOf('unclick'))!=-1) {
				this.className=this.className.replace("unclick", "");;
				}
				else {
				this.className+=" click";
				}
			}
		}
	}
</script>
</head>
<body onload="clickMenu('menu')">
<ul id="menu">
<li class="sub">ASP Codes
<ul>
<li><a href="/sort/list_1_11_1.shtml">聊天留言</a></li>
<li><a href="/sort/list_1_12_1.shtml">企業(yè)建站</a></li>
<li><a href="/sort/list_1_13_1.shtml">論壇社區(qū)</a></li>
</ul>
</li>
<li class="sub">PHP Codes
<ul>
<li><a href="/sort/list_1_28_1.shtml">影音視頻</a></li>
<li><a href="/sort/list_1_21_1.shtml">商務(wù)商城</a></li>
<li><a href="/sort/list_1_18_1.shtml">查詢搜索</a></li>
</ul>
</li>
<li class="sub">eShop
<ul>
<li><a href="/sort/list_1_19_1.shtml">圖片相冊(cè)</a></li>
<li><a href="/sort/list_1_23_1.shtml">主機(jī)郵件</a></li>
<li><a href="/sort/list_1_24_1.shtml">動(dòng)畫(huà)娛樂(lè)</a></li>
</ul>
</li>
<li class="sub">模板無(wú)憂
<ul>
<li><a href="/sort/list_1_84_1.shtml">文件治理</a></li>
<li><a href="/sort/list_1_87_1.shtml">Ajax相關(guān)</a></li>
<li><a href="/sort/list_1_33_1.shtml">綜合其它</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2010-05-22

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

下拉菜單，點(diǎn)擊后拉出，而非滑過(guò)_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些