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

線條型css滑動門_菜單導(dǎo)航特效

JavaScript配合CSS完成的滑動門，一大特色是線條分明，沒有過多修飾背景顏色，更能看清楚滑動門的結(jié)構(gòu)，希望這種風格的朋友不妨改進改進，變成你想要的樣式吧。

<!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 runat="server">
<title>線條型css滑動門</title>
<style>
body,div,ul,li{
 margin:0 auto;
 padding:0;
}
body{
 font:12px "宋體";
 text-align:center;
}
a:link{
 color:#00F;
 text-decoration:none;
}
a:visited {
 color: #00F;
 text-decoration:none;
}
a:hover {
 color: #c00;
 text-decoration:underline;
}
ul{
 list-style:none;
}
.main{
 clear:both;
 padding:8px;
 text-align:center;
}
#tabs1{
 text-align:left;
 width:400px;
}
.menu1box{
 position:relative;
 overflow:hidden;
 height:22px;
 width:400px;
 text-align:left;
}
#menu1{
 position:absolute;
 top:0;
 left:0;
 z-index:1;
}
#menu1 li{
 float:left;
 display:block;
 cursor:pointer;
 width:72px;
 text-align:center;
 line-height:21px;
 height:21px;
}
#menu1 li.hover{
 background:#fff;
 border-left:1px solid #333;
 border-top:1px solid #333;
 border-right:1px solid #333;
}
.main1box{
 clear:both;
 margin-top:-1px;
 border:1px solid #333;
 height:181px;
 width:400px;
}
#main1 ul{
 display: none;
}
#main1 ul.block{
 display: block;
}
</style>
<script>
function setTab(m,n){
 var tli=document.getElementById("menu"+m).getElementsByTagName("li");
 var mli=document.getElementById("main"+m).getElementsByTagName("ul");
 for(i=0;i<tli.length;i++){
  tli[i].className=i==n?"hover":"";
  mli[i].style.display=i==n?"block":"none";
 }
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="tabs1">
 <div class="menu1box">
  <ul id="menu1">
   <li class="hover" onmouseover="setTab(1,0)"><a href="#">ASP</a></li>
   <li onmouseover="setTab(1,1)"><a href="#">PHP</a></li>
   <li onmouseover="setTab(1,2)"><a href="#">ASP.NET</a></li>
   <li onmouseover="setTab(1,3)"><a href="#">AJAX</a></li>
  </ul>
 </div>
 <div class="main1box">
  <div class="main" id="main1">
   <ul class="block"><li>ASP</li></ul>
   <ul><li>PHP</li></ul>
   <ul><li>ASP.NET</li></ul>
   <ul><li>AJAX</li></ul>
  </div>
 </div>
</div>
</div>
</form>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時間：2012-11-15

[收藏][報錯][返回列表]

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

線條型css滑動門_菜單導(dǎo)航特效

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

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

猜你也喜歡看這些