Effect of Flash div+css+js menu
<ptml> <pead> <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> </pead> <body> <div id=fbtn> <div id=fbtn_mask></div> <di V id=fbtn_txt> <div>G1</div> <div>good morning</div> </div> </div> <d IV 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& Gt <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></di v> <div id=fbtn_txt> <div>M1</div> <div>my name is fireyy</div> </div> &L T;/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> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
