Jump to content

Sliding Menu


jnf555
 Share

Recommended Posts

hi i am haveing trouble makeing each menu working individually, anyone help<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;}</style><script type="text/javascript">var i=-135;var intHide;var speed=3;function showmenu(){clearInterval(intHide);intShow=setInterval("show()",10);}function hidemenu(){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" onmouseover="showmenu()" onmouseout="hidemenu()"><tr><td class="menu"><a href="/default.asp">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">ASP</a></td></tr><tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr><tr><td class="menu"><a href="default.asp">DHTML</a></td></tr><tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr></table><table id="myMenu" class="nav" width="150" onmouseover="showmenu()" onmouseout="hidemenu()"><tr><td class="menu"><a href="/default.asp">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">ASP</a></td></tr><tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr><tr><td class="menu"><a href="default.asp">DHTML</a></td></tr><tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr></table><p>Mouse over 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>thanks jnf555

Link to comment
Share on other sites

Things to think about:An id is supposed to be a unique identifier. Two page elements cannot have the same id. If they do, JavaScript will only recognize the first one. If you revise your code, you can refer to your tables this way:onmouseover="showmenu(this)"where this refers to the table you moused over. But then the rest of the code must be revised so that your functions expect a reference to the table. A function definition might look like this:function showmenu(the_table) {and then your statements would look like this:the_table.style.left = i;Of course your calls to setInterval will have to change also.You will also need a unique interval variable for each table. If you keep using the same variable over and over, then mousing over one table could stop the sliding movement of another table before it is done, and this will look bad. Users like to play with menus, and they will move their mouses over them very quickly, so you should assume this will happen.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...