CSS+JS簡潔實用的滑動導航欄_菜單導航特效

這個滑動門示例雖然簡潔，介理卻很實用，很多門戶都在用，不一定復雜的東西就是好，要根據自己的需要，用戶的需要適可而止，貴在使用，而不要炫技，您說呢？

<!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>滑動門導航</title>
<style type="text/css">
*{
 margin:0;
 padding:0;
 font-size:12px;
}
body{
 margin:5px;
}
.Tab{
 width:300px;
}
.TabBar{
 width:300px;
 list-style-type:none;
}
.TabBarNormal{
 float:left;
 width:60px;
 border:1px solid #0066CC;
 border-bottom:0px solid #fff;
 line-height:24px;
 text-align:center;
 margin:0 3px;
}
.TabBarActive{
 float:left;
 width:60px;
 border:1px solid #0066CC;
 border-bottom:0px solid #fff;
 background-color:#EEEEEE;
 line-height:25px;
 text-align:center;
 margin:0 3px;
 color:red
}
.TabContent{
 width:100%;
 height:200px;
 border:1px solid #0066CC;
 padding:5px;
 position:absolute;
 margin-top:-1px;
}
</style>
</head>
<body>
<div class="Tab">
 <ul class="TabBar">
  <li id="tab1" class="TabBarActive" onmouseover="showTab(1);">ASP</li>
  <li id="tab2" class="TabBarNormal" onmouseover="showTab(2);">PHP</li>
  <li id="tab3" class="TabBarNormal" onmouseover="showTab(3);">AJAX</li>
 </ul>
 <div class="TabContent" id="tabContent1">ASP源代碼，歡迎來到模板無憂</div>
 <div class="TabContent" id="tabContent2" >PHP精品源代碼</div>
 <div class="TabContent" id="tabContent3" >Ajax資源腳本</div>
</div>
<script type="text/javascript">
var activeTab =1;
var activeTabContent = 1;
var i;
for (i=2;i<=3;i++) {
 document.getElementById("tabContent"+i).style.display="none";
}
function showTabContent(n) {
 document.getElementById("tabContent"+activeTabContent).style.display="none";
 document.getElementById("tabContent"+n).style.display="";
 activeTabContent=n;
}
function showTab(n) {
 document.getElementById("tab"+activeTab).className="TabBarNormal";
 document.getElementById("tab"+n).className="TabBarActive";
 activeTab=n;
 showTabContent(n);
}
</script>
</body>
</html>

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

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

相關菜單導航特效：

CSS+JS簡潔實用的滑動導航欄_菜單導航特效

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

菜單導航特效推薦

猜你也喜歡看這些