页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

效果直逼flash的Div+Css+Js菜单

发布：dxy 字体：[增加减小] 类型：转载

效果直逼flash的Div+Css+Js菜单

点击运行可以看到效果:

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>css菜单</title>  
<style>  
body{  
background-color:#B8B8A0;  
}  
#fbtn{  
display:none;  
overflow:hidden;  
border-style:solid;  
border-width:1px;  
border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56;  
padding:1 1 1 1;  
width:115px;  
height:30px;  
}  
#fbtn_txt{  
position:relative;  
}  
#fbtn_txt div{  
height:30px;  
padding-top:11px;  
font-size:12px;  
color:#800080;  
text-align:center;  
cursor:hand;  
}  
#fbtn_mask{  
background-color:#ffffff;  
position:relative;  
width:100%;  
height:100%;  
}  
</style>

</head>

<body>

<div id=fbtn>  
<div id=fbtn_mask></div>  
<div id=fbtn_txt>  
<div>G1</div>  
<div>good morning</div>  
</div>  
</div>

<div id=fbtn>  
<div id=fbtn_mask></div>  
<div id=fbtn_txt>  
<div>G2</div>  
<div>good evening</div>  
</div>  
</div>

<div id=fbtn>  
<div id=fbtn_mask></div>  
<div id=fbtn_txt>  
<div>M1</div>  
<div>my name is fireyy</div>  
</div>  
</div>

<div id=fbtn>  
<div id=fbtn_mask></div>  
<div id=fbtn_txt>  
<div>G1</div>  
<div>good morning</div>  
</div>  
</div>

<div id=fbtn>  
<div id=fbtn_mask></div>  
<div id=fbtn_txt>  
<div>G2</div>  
<div>good evening</div>  
</div>  
</div>

<div id=fbtn>  
<div id=fbtn_mask></div>  
<div id=fbtn_txt>  
<div>M1</div>  
<div>my name is fireyy</div>  
</div>  
</div>

for(var i=0;i<fbtn.length;i++){  
fbtn_txt[i].style.posTop=-30;  
fbtn_mask[i].style.posTop=-30;  
fbtn[i].index=i;  
fbtn[i].style.display="block";

fbtn[i].onmouseover=function(){  
if(!current){  
current=this;  
domove(this.index);  
}  
else   
if(current!=this){  
domove(current.index);  
domove(this.index);  
current=this;  
}  
}

fbtn[i].onmouseout=function(){  
if(event.toElement==this.parentElement&t==this){  
domove(this.index);  
current=null;  
}  
}  
}

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：效果直逼flash的Div+Css+Js菜单