hide/show navigation

[th1chsn]

Does anyone have code to hide/show a sidebar navigation? I want to be able to allow the user to hide the sidebar navigation so they can see more of the site in their browser window.

[DrDoc]

Well, in theory, all you need to do is toggle the

display

property:

document.getElementById('sidenav').style.display = 'none';

[Fotiman]

But you could also do some cool animation effects to "slide" the bar in and out. For example, you could use the Yahoo UI Library [developer.yahoo.com] to create your own effects, or check out the yui-ext [yui-ext.com] (an extension to the Yahoo UI Library by Jack Slocum).

[XtendScott]

document.getElementById('navMenu').style.display = 'none';
document.getElementById('sidenav').style.width = 10px;

if you had a 10px wide "show/hide" image to trigger the event, you could hide the actual Menu elements and then leave the trigger image visible to be clicked again to toggle the display to be shown again.