jQuery 彈出菜單層

2010-05-19 導(dǎo)航菜單 ℃

<!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=utf-8" />
<title>jQuery 彈出層菜單</title>
<script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}img{border:none;}em{font-style:normal;}
a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();}
a:hover{color:#000;text-decoration:underline;}
body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
.clear{height:0;overflow:hidden;clear:both;}
.UpLayer{ margin:100px;}
.UpLayer dl dt{width:50px;position:absolute; z-index:3;padding:0 5px;line-height:20px;}
.UpLayer02{border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;}
.UpLayer dl dd{ width:80px;position:absolute;z-index:2;border:#ccc 1px solid;padding:5px; line-height:20px; background:#f1f1f1; display:none; margin:19px 0 0 -1px;}
.UpLayer dl dd a{ display:block;border-bottom:#ccc 1px dashed;}
</style>
<script type="text/javascript">
$(document).ready(function(){
	var objStr = ".UpLayer";
	$(objStr).each(function(i){
		$(this).click(function(){
			$($(objStr+" dd")[i]).show();
			$($(objStr+" dt")[i]).addClass("UpLayer02");
		});
		$(this).hover(function(){},function(){
			$($(objStr+" dd")[i]).hide();
			$($(objStr+" dt")[i]).removeClass("UpLayer02");
		});	
	});
});
</script>
</head>
<body>

<div   id="zzqin9z"   class="UpLayer">
    <dl>
        <dt><a href="javascript:void(0)">請點(diǎn)這里：彈出層</a></dt>
        <dd>
            <a href="#">手機(jī)資訊</a>
            <a href="#">熱門文章</a>
            <a href="#">聯(lián)系站長</a>
            <a href="#">時(shí)光勿勿</a>
        </dd>
    </dl>	
</div><br><br>
特效資料庫提示，如果網(wǎng)頁有出錯(cuò)提示，請刷新頁面再試。
</body>
</html>

相關(guān)特效代碼

熱門特效代碼: 三級(jí)豎向展開/收縮導(dǎo)航菜單; 鼠標(biāo)指向彈出菜單; jQuery 彈出菜單層; CSS二級(jí)下拉導(dǎo)航菜單; CSS做的垂直導(dǎo)航菜單效果; 橫向二級(jí)導(dǎo)航菜單; 仿google首頁下端圖片文字動(dòng)畫導(dǎo); 導(dǎo)航鏈接菜單間隔閃爍; 動(dòng)態(tài)翻滾的導(dǎo)航條[酷比flash]; 純CSS的三級(jí)聯(lián)動(dòng)級(jí)聯(lián)菜單

推薦特效代碼: CSS+div+js組合強(qiáng)大實(shí)現(xiàn)超酷菜單; 動(dòng)態(tài)翻滾的導(dǎo)航條[酷比flash]; CSS橫向下拉菜單; 微軟風(fēng)格的CSS橫向菜單; 立體的CSS按鈕菜單效果; 左側(cè)隱藏的菜單