线条型css滑动门_菜单导航特效

JavaScript配合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 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>

所属频道：菜单导航特效/更新时间：2012-11-15

[收藏][报错][返回列表]

线条型css滑动门_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些