符合標準的滑動門(JS+CSS)_菜單導航特效

看上往很簡潔的一款符合標準的滑動門（JS+CSS），沒有怎么美化，修復了個別小錯誤，現在滑動門的基本功能已經實現，風格和一些大站很相似，天藍色簡潔風格。

<!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>滑動門-www.zhaotila.cn</title> 
<style type="text/css"> 
body{ 
font-family: arial; 
font-size: 12px; 
background: #fff; 
text-align: center; 
margin: 0; 
} 
.nTab{ 
float: left; 
width: 960px; 
margin: 0 auto; 
border-bottom:1px #AACCEE solid; 
background:#d5d5d5; 
background-position:left; 
background-repeat:repeat-y; 
margin-bottom:2px; 
} 
.nTab .TabTitle{ 
clear: both; 
height: 22px; 
overflow: hidden; 
} 
.nTab .TabTitle ul{ 
border:0; 
margin:0; 
padding:0; 
} 
.nTab .TabTitle li{ 
float: left; 
width: 70px; 
cursor: pointer; 
padding-top: 4px; 
padding-right: 0px; 
padding-left: 0px; 
padding-bottom: 2px; 
list-style-type: none; 
} 
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;} /* www.zhaotila.cn  */
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;} 
.nTab .TabContent{ 
width:auto;background:#fff; 
margin: 0px auto; 
padding:10px 0 0 0; 
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid; 
} 
.none {display:none;} 
</style> 
<script type="text/javascript"> 
function nTabs(thisObj,Num){ 
if(thisObj.className == "active")return; 
var tabObj = thisObj.parentNode.id; 
var tabList = document.getElementById(tabObj).getElementsByTagName("li"); 
for(i=0; i <tabList.length; i++) 
{ 
if (i == Num) 
{ 
   thisObj.className = "active"; 
      document.getElementById(tabObj+"_Content"+i).style.display = "block"; 
}else{ 
   tabList[i].className = "normal"; 
   document.getElementById(tabObj+"_Content"+i).style.display = "none"; 
} 
} 
} 
</script> 
</head> 
<body> 
<div align="center" style="padding-left:25px;"> 
 
<div class="nTab"> 
     
    <div class="TabTitle"> 
      <ul id="myTab0"> 
        <li class="active" onmouseover="nTabs(this,0);">全部</li> 
        <li class="normal" onmouseover="nTabs(this,1);">日志</li> 
        <li class="normal" onmouseover="nTabs(this,2);">作品</li> 
        <li class="normal" onmouseover="nTabs(this,3);">相冊</li> 
        <li class="normal" onmouseover="nTabs(this,4);">心情</li> 
        <li class="normal" onmouseover="nTabs(this,5);">社區</li> 
      </ul> 
    </div> 
     
    <div class="TabContent"> 
      <div id="myTab0_Content0"> 全部的內容顯示在這里 </div> 
      <div id="myTab0_Content1" class="none">這里是日志哦</div> 
      <div id="myTab0_Content2" class="none">我的作品展示</div> 
      <div id="myTab0_Content3" class="none">我的相冊，不要誤看哦</div> 
      <div id="myTab0_Content4" class="none">記錄心情日志</div> 
      <div id="myTab0_Content5" class="none">社區</div> 
    </div> 
</div> 
 
</body> 
</html>

所屬頻道：菜單導航特效/更新時間：2012-10-30

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

相關菜單導航特效：

符合標準的滑動門(JS+CSS)_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些