Comparable to the JS navigation menu of Flash
<Html> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "> <title> JS navigation menu comparable to Flash </title> <style type =" text/css "> <! --. W1 {width: 538px ;}. w2 {width: 100px ;}. ztd {color: #202020 ;}. bg22 {color: #858585; height: 29px; font-family: Arial, Helvetica, sans-serif; font-size: 12px ;}. bg22 A {color: #858585 ;}. bg27 {text-align: right; height: 30px; width: 538px ;}. ztd {color: #202020; font-family: Arial, Helvetica, sans-serif; font-size: 12px ;}. zta {color: #449100; font-family: Arial, Helvetica, sans-serif; font-size: 12px ;}. bg28 {text-align: center; height: 28px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #202020; background-color: # FAFAFA;} body {text-align: center;} a {font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; color: # 66614B;} a: link {text-decoration: none;} a: visited {text-decoration: none;} a: active {text-decoration: none ;} a: hover {text-decoration: underline ;}. ha {height: 8px ;}. hb {height: 5px ;}. img15 {background-image: url ( http://www.jb51.net/jstest/images/200651105044727.GIF ); Background-repeat: repeat-x ;}. qh {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: # 3A3A3A; height: 28px; width: 533px ;}. qhl {color: # 3A3A3A; width: 235px; text-align: left ;}. qhc {text-align: center; width: 60px ;}. qhc a {color: #898989 ;}. qhr {color: # 3A3A3A; text-align: right; width: 235px;} --> </style> <STYLE type = text/css>. table1 {BORDER-RIGHT: # cccccc 1px s Olid; BORDER-BOTTOM-COLOR: black; BORDER-LEFT: # cccccc 1px solid; BORDER-TOP-STYLE: solid; BORDER-TOP-COLOR: black; BACKGROUND-COLOR: #666666; BORDER-BOTTOM-STYLE: solid }. alkaline {FILTER: Alpha (Opacity = 0, FinishOpacity = 0, Style = 2, StartX = 0, StartY = 0, FinishX = 80, FinishY = 80); BACKGROUND-COLOR: #99 ccff }. maskl {OVERFLOW: hidden }. submenu {BORDER-RIGHT: # ffffff 1px solid; BORDER-TOP: # ffffff 1px so Lid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: # ffffff 1px solid} </STYLE> SCRIPT function subClose1 () {if (sub2.style. pixelLeft>-26) {sub2.style. pixelLeft --; setTimeout ("subClose1 ()", 1);} else {sub2.style. pixelLeft =-26; subMenuShowing = false; hideM2 () ;}} subMenuShowing = false; function subMenu1 () {var obj = event. srcElement; subMenuShowing = true; sub2out () ;}function sub2out () {if (sub2.style. p IxelLeft <2) {sub2.style. pixelLeft ++; setTimeout ("sub2out ()", 1) ;}} curSelect = 0; function showMenu (mID) {var oMenu = eval ("menu" + mID ); var oCircle = eval ("sl" + mID); oMenu. style. pixelTop + = 10; if (oMenu. style. pixelTop <oCircle. style. pixelTop + 6) {oMenu. timeHandle = setTimeout ("showMenu (" + mID + ")", 1);} else oMenu. style. pixelTop = oCircle. style. pixelTop + 6;} function hideMenu (mID) {var oMenu = eval ("menu" + mID); v Ar oCircle = eval ("sl" + mID); oMenu. style. pixelTop-= 10; if (oMenu. style. pixelTop>-60) {oMenu. timeHandle = setTimeout ("hideMenu (" + mID + ")", 1);} else oMenu. style. pixelTop =-80;} function lightMv () {if (light. filters. alpha. opacity <100) {light. filters. alpha. opacity + = 5; light. timeHandle = setTimeout ("lightMv ()", 1) ;}} function darkMv () {if (light. filters. alpha. opacity> 0) {light. filters. alpha. opacity-= 5; ligh T. timeHandle = setTimeout ("darkMv ()", 1) ;}} function sfMv1 () {sl1.style. pixelTop + = sl1.mvStep; if (sl1.dx ++)> 20) {sl1.mvStep =-sl1.mvStep; sl1.dx = 0; sl1.speed = parseInt (Math. random (1) * 60 + 1)} sl1.timeHandle = setTimeout ("sfMv1 ()", sl1.speed);} function sfMv2 () {sl2.style. pixelTop ++ = sl2.mvStep; if (sl2.dx ++)> 20) {sl2.mvStep =-sl2.mvStep; sl2.dx = 0; sl2.speed = parseInt (Math. random (1) * 60 + 1)} sl2.timeHandl E = setTimeout ("sfMv2 ()", sl2.speed);} function sfMv3 () {sl3.style. pixelTop + = sl3.mvStep; if (sl3.dx ++)> 20) {sl3.mvStep =-sl3.mvStep; sl3.dx = 0; sl3.speed = parseInt (Math. random (1) * 60 + 1)} sl3.timeHandle = setTimeout ("sfMv3 ()", sl3.speed);} function sfMv4 () {sl4.style. pixelTop + = sl4.mvStep; if (sl4.dx ++)> 20) {sl4.mvStep =-sl4.mvStep; sl4.dx = 0; sl4.speed = parseInt (Math. random (1) * 60 + 1)} sl4.timeHandle = setT Imeout ("sfMv4 ()", sl4.speed);} function stopAllMv () {clearTimeout (sl1.timeHandle); clearTimeout (sl2.timeHandle); clearTimeout (sl3.timeHandle); clearTimeout (sl4.timeHandle );} function startAllMv () {clearTimeout (light. timeHandle); darkMv (); sfMv1 (); sfMv2 (); sfMv3 (); sfMv4 ();} function showM1 () {if (! SubMenuShowing) {stopAllMv (); light. style. pixelTop = sl1.style. pixelTop-30; clearTimeout (light. timeHandle); clearTimeout (menu1.timeHandle); lightMv (); showMenu (1) ;}} function showM2 () {if (! SubMenuShowing) {stopAllMv (); light. style. pixelTop = sl2.style. pixelTop-30; clearTimeout (light. timeHandle); clearTimeout (menu2.timeHandle); lightMv (); showMenu (2) ;}} function showM3 () {if (! SubMenuShowing) {stopAllMv (); light. style. pixelTop = sl3.style. pixelTop-30; clearTimeout (light. timeHandle); clearTimeout (menu3.timeHandle); lightMv (); showMenu (3) ;}} function showM4 () {if (! SubMenuShowing) {stopAllMv (); light. style. pixelTop = sl4.style. pixelTop-30; clearTimeout (light. timeHandle); clearTimeout (menu4.timeHandle); lightMv (); showMenu (4) ;}} function hideM1 () {if (! SubMenuShowing) {startAllMv (); clearTimeout (menu1.timeHandle); hideMenu (1) ;}} function hideM2 () {if (! SubMenuShowing) {startAllMv (); clearTimeout (menu2.timeHandle); hideMenu (2) ;}} function hideM3 () {if (! SubMenuShowing) {startAllMv (); clearTimeout (menu3.timeHandle); hideMenu (3) ;}} function hideM4 () {if (! SubMenuShowing) {startAllMv (); clearTimeout (menu4.timeHandle); hideMenu (4) ;}} function init () {sl1.mvStep = 1; sl1.dx = 0; sl1.speed = 50; sl2.mvStep = 1; sl2.dx = 0; sl2.speed = 1; sl3.mvStep = 1; sl3.dx = 0; sl3.speed = 10; sl4.mvStep = 1; sl4.dx = 0; sl4.speed = 20; startAllMv ();} SCRIPT <META content = "Microsoft FrontPage 6.0" name = GENERATOR> </pead> <BODY text = # cccccc bgColor = #000000 leftMargin = 0 topMargin = 0 onload = init () marginheight = "0" marginwidth = "0"> <TABLE class = submenu height = "100%" cellSpacing = 2 cellPadding = 0 width = "100%" border = 0> <TBODY> <TR> <TD bgColor = #666699> </TD> </TR> <TD bgColor = #666699> </TD> </TR> <TD bgColor = #666699> </TD> </TR> <TD bgColor = #666699 height = 147> </TD> </TR> <TD onmouseover = "this. bgColor = '# 9999cc' "onmouseout =" this. bgColor = '#666699' "bgColor = #666699 height = 10> <B> B </B> </TD> </TR> </TBODY> </TABLE> <center> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]