室內設計
 
尚佶網頁設計主選單
網頁美編設計製作
行動手機‧行動電視
網頁設計
網頁設計
最新訊息:
  網頁設計全球效應
  網頁設計的行銷效用?
作品設計歷程:
  昇華文件櫃有限公司
Shen Hua Filing Cabinet
File Cabinet
  戀戀紅葡萄酒酒莊 酒莊
  美和美吊扇公司
  HCB AUTO TOOLS
  鳳凰企業社
  國立中正大學行銷創意研究中心
  銘輝毛刷有限公司
  大業國中 嘉義市 97 海洋教育計畫
  鳳凰冰涼巾公司
  進泉瓜子
  金鴻勝酒廠
  集順汽車椅套
  嘉義市97教學卓越計畫
  鉅祥工具開發有限公司
更多作品 >>
 

 

 

 

 

 

 

 

filing cabinet file cabinet 新恩嘉義神經內科 新恩嘉義神經內科

 

 
 
網頁設計+創意=100%網站   
網頁MENU效果不輸FLASH E-mail
2008/01/28, 週一

網頁MENU效果設計真的不輸FLASH

網頁美編

網頁MENU效果不輸FLASH<hr>-網頁水平線-↑向上

通常我們網頁設計所製作的MENU,大部份會用表格的做法,然後放上圖片,或是用JAVA下去設計,有的網頁甚至會動用到FLASH的設計效果,做起來會比較生動,不過以下介紹的卻是運用CSS下去設計的網頁MENU,做起來可不輸FLASH所做的網頁設計效果。

網頁MENU效果不輸FLASH﹝Div+Css+Js﹞

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>css網頁menu設計</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>M2</div>  
<div>mm mm i love u</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>  
<div id=fbtn>  
<div id=fbtn_mask></div>  
<div id=fbtn_txt>  
<div>M2</div>  
<div>mm mm i love u</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>

網頁美編
網頁美編
< 上一頁   下一頁 >
top_18.jpg
 
 
尚佶網頁設計 2011 © copyright 版權所有.All rights reserved.
 
©2011 Sungie