每日更新|TOP排行榜|Tag标签|充值

无忧首页网页模板程序模板建站教程视频教程网页特效图标素材字体下载站长工具站长问答

网页特效代码模板无忧>网页特效>菜单导航特效代码>

收藏分享查看评论菜单导航

DIV+Css FLASH效果导航菜单_菜单导航特效

查看演示效果

特效Tag：导航菜单添加

很动感的FLASH效果的DIV+Css网站导航菜单，竖向排列，响应鼠标运作，还有光照殊效，很有动感的样子，界面也挺漂亮，值得收躲一下。

<html>
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>DIV+Css 菜单_mb5u.com</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:9px;
 font-family:small fonts;
 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>HOME</div>
 <div><a href="/">mb5u.com</a></div>
 </div>
</div>
<div id=fbtn>
 <div id=fbtn_mask></div>
 <div id=fbtn_txt>
 <div>ASP</div>
 <div>ASP Code</div>
 </div>
</div>
<div id=fbtn>
 <div id=fbtn_mask></div>
 <div id=fbtn_txt>
 <div>PHP</div>
 <div>PHP Code</div>
 </div>
</div>
<div id=fbtn>
 <div id=fbtn_mask></div>
 <div id=fbtn_txt>
 <div>.NET</div>
 <div>ASP.NET Code</div>
 </div>
</div>
<div id=fbtn>
 <div id=fbtn_mask></div>
 <div id=fbtn_txt>
 <div>JSP</div>
 <div>JSP Code</div>
 </div>
</div>
<div id=fbtn>
 <div id=fbtn_mask></div>
 <div id=fbtn_txt>
 <div>Ajax</div>
 <div>Ajax Demo</div>
 </div>
</div>

<script>
var current=null;
var t=null;
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;
 }
 }
 }
function domove(num){
 var o=fbtn_txt[num];
 var m=fbtn_mask[num];
 if(o.style.posTop<-60){
 o.style.display="none";
 var t=o.children[1].innerHTML;
 o.children[1].innerHTML=o.children[0].innerHTML;
 o.children[0].innerHTML=t;
 o.style.posTop=-30;
 o.style.display="block";
 if(m.style.posTop>30)
 m.style.posTop=-30;
 else
 m.style.posTop=0;
 }
 else{
 m.style.posTop+=3;
 o.style.posTop-=3;
 setTimeout('domove('+num+')',15);
 }
 }
</script>
</body>
</html>

所属频道：菜单导航特效/更新时间：2010-05-22

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

相关菜单导航特效：

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

菜单导航特效推荐

猜你也喜欢看这些

相关链接：
复制本页链接| 搜索DIV+Css FLASH效果导航菜单
特效说明：
菜单导航模板-DIV+Css FLASH效果导航菜单。