Will move the menu, the Layer menu, the mouse on the menu, the menu will move, floating menu, like the tab-style menu, using a picture, follow the code can be downloaded to this decorated small picture.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML><HEAD><TITLE> Mobile menu, Layer menu Movemenu </TITLE> <meta content= "text/html; charset=gb2312 "Http-equiv=content-type> <style type=text/css>.alpha {filter:alpha (Opacity=80)}. TD1 {FO NT-SIZE:12PX}. td2 {background-color: #ccffff; Cursor:hand; FONT-SIZE:12PX}. Maskl {Overflow:hidden}. cardtitle {border-bottom:black 0px solid; Border-left:black 0px solid; Border-right:black 1px solid; Border-top:black 1px solid; Cursor:default; font-size:12px; TEXT-INDENT:4PT}. Cardbottom {background-color: #99ccff; Border-bottom:black 1px solid; Border-left:black 1px solid; Border-right:black 1px solid; Border-top:black 0px solid; Filter:alpha (opacity=90)} </STYLE> <script language=jscript>//recommended to use this code in IE5.0 above. Use an array to store multiple timeout identities. Tback=new Array (5); Tout=new Array (5); Activates the current tab. Function Menuout (whichmenu) {var curmenu=eval ("menu" +whichmenu); curmenu.runtimestyle.zindex=6; Cleartimeout (Tback[whichmenu]); Moveout (Whichmenu); //Restore the initial state. function Menuback (whichmenu) {var curmenu=eval ("menu" +whichmenu); Curmenu.runtimestyle.zindex=curmenu.style.zindex; Cleartimeout (Tout[whichmenu]); Moveback (Whichmenu); }//Move current tab function Moveout (curnum) {var curmenu=eval ("menu" +curnum); if (curmenu.style.posleft>0) {curmenu.style.posleft-=2; Tout[curnum]=settimeout ("Moveout" (' +curnum+ ")", 1); }//Move back tab. function Moveback (curnum) {var curmenu=eval ("menu" +curnum); if (curmenu.style.posleft<30) {curmenu.style.posleft+=2; Tback[curnum]=settimeout ("Moveback" (' +curnum+ ")", 1); }///mouse changes the table cell style. function Swapclass () {var o=event.srcelement; if (o.classname== "TD1") o.classname= "TD2" else if (o.classname== "TD2") o.classname= "TD1"; } Document.onmouseover=swapclass; Document.onmouseout=swapclass; </SCRIPT> <meta content= "MSHTML 5.00.2920.0 "name=generator></pead> <body bgcolor= #ffffff leftmargin=0 text= #000000 topmargin=0 marginheight=" 0 " Marginwidth= "0" > <div class=maskl id=menupos style= "height:216px"; left:115px; Position:absolute; top:59px; width:132px; Z-index:1 "> <div id=menu1 onmouseout=menuback (1) onmouseover=menuout (1) style=" height:20px; left:30px; Position:absolute; top:0px; width:130px; Z-index:1 "> <div class=cardbottom id=layer1 style=" height:115px; left:0px; Position:absolute; top:17px; width:100px; Z-index:1 "> <table align=center border=0 height=" 100% "width=75> <TBODY> <TR> <td CLASS=TD1&G t; option one </TD></TR> <TR> <td class=td1> option two </TD></TR> <TR> <td class=td1> Option three </TD></TR> <TR> <td class=td1> option four </TD></TR> <TR> <td> </ td></tr></tbody></table></div> <table border=0 cellpadding=0 cellSpacing=0 width=100> <TBODY> <TR> <td height=18 width=14></td> <td bgcolor= #99ccff class=c Ardtitle height=14 width=86> tab </TD></TR></TBODY></TABLE></DIV> <div id=menu2 Onmouseout=menuback (2) onmouseover=menuout (2) style= "height:20px; left:30px; Position:absolute; top:20px; width:130px; Z-index:1 "> <div class=cardbottom id=layer2 style=" height:115px; left:0px; Position:absolute; top:17px; width:100px; Z-index:1 "> <table align=center border=0 height=" 100% "width=75> <TBODY> <TR> <td CLASS=TD1&G t; option one </TD></TR> <TR> <td class=td1> option two </TD></TR> <TR> <td class=td1> Option three </TD></TR> <TR> <td class=td1> option four </TD></TR> <TR> <td> </ td></tr></tbody></table></div> <table border=0 cellpadding=0 cellSpacing=0 width=100 > <TBODY> <TR> <TD height=18 width=14></td> <td bgcolor= #99ccff class=cardtitle height=14 width=86> tab two </TD> </TR></TBODY></TABLE></DIV> <div id=menu3 onmouseout=menuback (3) onmouseover=menuout (3) Style= "height:20px; left:30px; Position:absolute; top:40px; width:130px; Z-index:1 "> <div class=cardbottom id=layer3 style=" height:115px; left:0px; Position:absolute; top:17px; width:100px; Z-index:1 "> <table align=center border=0 height=" 100% "width=75> <TBODY> <TR> <td CLASS=TD1&G t; option one </TD></TR> <TR> <td class=td1> option two </TD></TR> <TR> <td class=td1> Option three </TD></TR> <TR> <td class=td1> option four </TD></TR> <TR> <td> </ td></tr></tbody></table></div> <table border=0 cellpadding=0 cellSpacing=0 width=100 > <TBODY> <TR> <td height=18 width=14></td><TD bgcolor= #99ccff class=cardtitle height=14 width=86> tab three </td></tr></tbody></table ></DIV> <div id=menu4 onmouseout=menuback (4) onmouseover=menuout (4) style= "height:20px"; left:30px; Position:absolute; top:60px; width:130px; Z-index:1 "> <div class=cardbottom id=layer4 style=" height:115px; left:0px; Position:absolute; top:17px; width:100px; Z-index:1 "> <table align=center border=0 height=" 100% "width=75> <TBODY> <TR> <td CLASS=TD1&G t; option one </TD></TR> <TR> <td class=td1> option two </TD></TR> <TR> <td class=td1> Option three </TD></TR> <TR> <td class=td1> option four </TD></TR> <TR> <td> </ td></tr></tbody></table></div> <table border=0 cellpadding=0 cellSpacing=0 width=100 > <TBODY> <TR> <td height=18 width=14></td> <td bgcolor= #99ccff class=cardtitle height=Width=86> tab Four </TD></TR></TBODY></TABLE></DIV> <div id=menu5 onmouseout= Menuback (5) onmouseover=menuout (5) style= "HEIGHT:134PX; left:30px; Position:absolute; top:80px; width:130px; Z-index:1 "> <div class=cardbottom id=layer5 style=" height:115px; left:0px; Position:absolute; top:17px; width:100px; Z-index:1 "> <table align=center border=0 height=" 100% "width=75> <TBODY> <TR> <td CLASS=TD1&G t; option one </TD></TR> <TR> <td class=td1> option two </TD></TR> <TR> <td class=td1> Option three </TD></TR> <TR> <td class=td1> option four </TD></TR> <TR> <td> </ td></tr></tbody></table></div> <table border=0 cellpadding=0 cellSpacing=0 width=100 > <TBODY> <TR> <td height=18 width=14></td> <td bgcolor= #99ccff class=cardtitle height=1 4 width=86> tab Five </TD></TR></tbody></table></div></div> </BODY></HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
