nick1 Posted August 10, 2007 Share Posted August 10, 2007 Greetings, On the left side of my website I have a navigation menu built from a table. I would like to give visitors the option of hiding this table. I would like the table to behave like this: 1.) When the website is visited, the table is visible. 2.) Somewhere near the table there is an option to hide the table. This could be a small "<" image, for example. 3.) When that option is clicked, the table is "pushed" to the far left, off the screen. This is the hiding concept. 4.) After the table is hidden, there would exist an option to display the table again. This could be a small ">" image, for example. What is the most correct way to design this feature? Compatibility across multiple web browsers is very important here. I know some CSS and have only seen JavaScript but would appreciate code snippets and technical explanations. Thank you for your time, Nick Quote Link to comment Share on other sites More sharing options...
php_tom Posted August 10, 2007 Share Posted August 10, 2007 Try this (works in IE7 and FF): <html> <head> <script type='text/javascript'> var hide = false; function toggleVis() { hide = !hide; if(hide) { document.getElementById('menu').style.visibility = "hidden"; document.getElementById('txt').innerHTML = "<a href='#' onclick='toggleVis();'>Show Menu</a>"; } else { document.getElementById('menu').style.visibility = "visible"; document.getElementById('txt').innerHTML = "<a href='#' onclick='toggleVis();'>Hide Menu</a>"; } } </script> </head> <body> <div id='txt'><a href='#' onclick='toggleVis();'>Hide Menu</a></div> <table id='menu' border='1'><tr><td> Navigation<br> Goes<br> Here<br> </td></tr></table> </body> </html> Hope that helps. Quote Link to comment Share on other sites More sharing options...
nick1 Posted August 15, 2007 Author Share Posted August 15, 2007 Thank you for your help. I decided to go with this solution: <script type="text/javascript"> //Purpose: Hides or shows the menu div. //<![CDATA[ var hide = false; function HideShowMenu() { hide = !hide; if(hide) { document.getElementById('menu').style.display = 'none'; } else { document.getElementById('menu').style.display = 'block'; } } //]]> </script> Along with your help, I also found Learning JavaScript by Shelley Powers (O'Reilly) page 263 very helpful. Thanks, Nick Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.