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订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些