每日更新|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效果導航菜單。