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

What is the most correct way to design this feature?

• First design navigation in a list format. Thiis is purely for accessibility reasons.
• Secondly read up on DOM and implementation.
• When the javascript is run add the button element that will do the hiding
• Add an onclick event to the button.
• When the button is pushed run a function that affects the style of the navigation list.
• Design the function so that it sets a variable so you know whether to hide or show the list when the button is clicked.
• Sit back and enjoy your accessible site.

Jamie

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