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

JavaScript+CSS雙層嵌套的滑動門導(dǎo)航塊_菜單導(dǎo)航特效

JavaScript+CSS聯(lián)合完成一個(gè)特別的滑動門功能，讓兩個(gè)滑動塊分里面兩層嵌套在一起，其實(shí)這種使用價(jià)值不太大，只不過這里可以當(dāng)作一個(gè)技術(shù)問題來共同探討，要注意一下CSS中的margin那里調(diào)節(jié)各個(gè)li之間的距離,position是保證下邊框的出現(xiàn)，其它的請看代碼里的注釋吧。

<!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" mrc="text/html; charset=gb2312" />
<title>雙層嵌套的滑動門導(dǎo)航塊</title>
<style>
*{
font-size:9pt;
}
#tab{width:400px;
	height:auto;
	margin:0 auto;	
	position:relative;
}
  ul{list-style:none; margin-left:20px;}
li{ float:left;height:30px;background:url(http://p1.mb5u.com/texiao/1/tr2.jpg);margin:0 5px;text-align:center;line-height:30px;color:#293863;width:60px; position:relative;bottom:-3px;}
.dise{display:block;}
.undise{display:none;}
.fff{background:
url(http://p1.mb5u.com/texiao/1/tr.jpg);}
.all{clear:left; width:400px;}
.all div{width:400px;background-color:#F2F5FA;text-align:left;line-height:20px; height:200px;
border:1px #CCCDCD solid; }/*一定要設(shè)border*/
#kao{position:absolute;
	 top:40px;
}

</style>
</head>
<script  language="javascript">
function g(o){return document.getElementById(o);}
function showdiv(i){
for(j=1;j<=3;j++){
g("div"+j).className="undise"
g("li"+j).className=""
}
g("div"+i).className="dise"
g("li"+i).className="fff"
}
function showdiv1(i){
for(j=4;j<=6;j++){
g("div"+j).className="undise"
g("li"+j).className=""
}
g("div"+i).className="dise"
g("li"+i).className="fff"
}
</script>
<body>
	<div div id="tab">
		<ul>
		<li id="li1" class="fff"><span onmouseover="showdiv(1)">源代碼</span></li>
		<li id="li2"><span onmouseover="showdiv(2)">網(wǎng)頁特效</span></li>
		<li id="li3"><span href="#" onmouseover="showdiv(3)">編程類</span></li>
		</ul>
	
	<div class="all">
		<div id="div1" class="dise">ada</div>
		<div id="div2" class="undise">b</div>
		<div id="div3" class="undise">c</div> 
	</div>
    	<div id="kao">
    	<ul >
		<li id="li4" class="fff"><span onmouseover="showdiv1(4)">精品源碼</span></li>
		<li id="li5"><span onmouseover="showdiv1(5)">常用特效</span></li>
		<li id="li6"><span href="#" onmouseover="showdiv1(6)">編程</span></li>
		</ul>
	
	<div class="all">
		<div id="div4" class="dise">ada</div>
		<div id="div5" class="undise">b</div>
		<div id="div6" class="undise">c</div> 
	</div>  
    </div>
    </div>
</body>
</html>

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

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

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

JavaScript+CSS雙層嵌套的滑動門導(dǎo)航塊_菜單導(dǎo)航特效

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

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

猜你也喜歡看這些