Tryit Editor v1.4

<html> <head> <style> body{font-family:arial;} a{color:black;text-decoration:none;font:bold} a:hover{color:#606060} td.menu{background:lightblue} table.nav { background:black; position:relative; font: bold 80% arial; top:0px; left:-135px; margin-left:3px; } </style> <script type="text/javascript"> var i=-135; var c=0; var intHide; var speed=3; function show_hide_menu() { if (c==0) { c=1; clearInterval(intHide); intShow=setInterval("show()",10); } else { c=0; clearInterval(intShow); intHide=setInterval("hide()",10); } } function show() { if (i<-12) { i=i+speed; document.getElementById('myMenu').style.left=i; } } function hide() { if (i>-135) { i=i-speed; document.getElementById('myMenu').style.left=i; } } </script> </head> <body> <table id="myMenu" class="nav" width="150" onclick="show_hide_menu()"> <tr><td class="menu"><a href="../default.asp.htm">HOME</a></td> <td rowspan="5" align="center" bgcolor="#FF8080">M<br />E<br />N<br />U</td></tr> <tr><td class="menu"><a href="../asp/default.asp.htm">ASP</a></td></tr> <tr><td class="menu"><a href="../js/default.asp.htm">JavaScript</a></td></tr> <tr><td class="menu"><a href="default.asp.htm">DHTML</a></td></tr> <tr><td class="menu"><a href="../vbscript/default.asp.htm">VBScript</a></td></tr> </table> <p>Click on the MENU to show/hide the menu</p> <p>Try changing the "speed" variable in the script, to change the menus's sliding speed</p> </body> </html> | Your Result:
Edit the code above and click to see the result. | W3Schools.com - Try it yourself