鼠标触发移动的分层菜单 层菜单moveMenu_导航菜单

会移动的菜单，层菜单，鼠标放在菜单上，菜单就会移动，上浮的菜单，像是TAB风格的菜单，使用了一张图片，顺着代码可下载到这张修饰的小图片。

<title>移动菜单，层菜单moveMenu</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <style type="text/css">.alpha { FILTER: Alpha(Opacity=80) } .td1 { FONT-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> <meta content="MSHTML 5.00.2920.0" name="GENERATOR"> <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">选项一</td></tr> <tr><td class="td1">选项二</td></tr> <tr><td class="td1">选项三</td></tr> <tr><td class="td1">选项四</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"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=L2pzY3NzL2RlbW9pbWcvMjAxMjEyL3N0YW5nLmdpZg==" alt="鼠标触发移动的分层菜单 层菜单moveMenu_导航菜单" title="鼠标触发移动的分层菜单 层菜单moveMenu_导航菜单"></td> <td bgcolor="#99ccff" class="cardtitle" height="14" width="86">选项卡一</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">选项一</td></tr> <tr><td class="td1">选项二</td></tr> <tr><td class="td1">选项三</td></tr> <tr><td class="td1">选项四</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"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=L2pzY3NzL2RlbW9pbWcvMjAxMjEyL3N0YW5nLmdpZg==" alt="鼠标触发移动的分层菜单 层菜单moveMenu_导航菜单" title="鼠标触发移动的分层菜单 层菜单moveMenu_导航菜单"></td> <td bgcolor="#99ccff" class="cardtitle" height="14" width="86">选项卡二</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">选项一</td></tr> <tr><td class="td1">选项二</td></tr> <tr><td class="td1">选项三</td></tr> <tr><td class="td1">选项四</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"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=L2pzY3NzL2RlbW9pbWcvMjAxMjEyL3N0YW5nLmdpZg==" alt="鼠标触发移动的分层菜单 层菜单moveMenu_导航菜单" title="鼠标触发移动的分层菜单 层菜单moveMenu_导航菜单"></td> <td bgcolor="#99ccff" class="cardtitle" height="14" width="86">选项卡三</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">选项一</td></tr> <tr><td class="td1">选项二</td></tr> <tr><td class="td1">选项三</td></tr> <tr><td class="td1">选项四</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"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=L2pzY3NzL2RlbW9pbWcvMjAxMjEyL3N0YW5nLmdpZg==" alt="鼠标触发移动的分层菜单 层菜单moveMenu_导航菜单" title="鼠标触发移动的分层菜单 层菜单moveMenu_导航菜单"></td> <td bgcolor="#99ccff" class="cardtitle" height="14" width="86">选项卡四</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">选项一</td></tr> <tr><td class="td1">选项二</td></tr> <tr><td class="td1">选项三</td></tr> <tr><td class="td1">选项四</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"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=L2pzY3NzL2RlbW9pbWcvMjAxMjEyL3N0YW5nLmdpZg==" alt="鼠标触发移动的分层菜单 层菜单moveMenu_导航菜单" title="鼠标触发移动的分层菜单 层菜单moveMenu_导航菜单"></td> <td bgcolor="#99ccff" class="cardtitle" height="14" width="86">选项卡五</td> </tr></tbody></table> </div> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]