Collapsible Mac-Like Sidebar Navigation With Sub-Menus

Question

I need to build a fluid width navigation system that is 100% in width, like this: http://nwhc.dylanparrin.com . Just wondering if there is a way I can get it so that once a sub-menu is click, the previous menu collapses, right now there's like 30% of the page being used for the final content, would be nice if I could get at least 80% (As in, the menus used to get the to content hide to the left once clicked).

See diagram here: http://i.stack.imgur.com/qJIZB.png How would this be possible?

Kindest Regards, Dylan

Answer 1

Basically, you could recreate that look and feel using something as simple as this in basic JavaScript:

Just adjust the code as needed that will be visible/hidden and change the 'display1', 'display2', etc. as needed. They will all act independently and "push" content when expanded or contracted oscreen.

If this is a suitable solution, please select it as the answer - thanks!

<script type="text/javascript">  
<!--

    function Show_Stuff(Click_Menu)
    // Function that will swap the display/no display for
    // all content within span tags
    {
    if (Click_Menu.style.display == "none")
    {
    Click_Menu.style.display = "";
    }
    else
    {
    Click_Menu.style.display = "none";
    }
    }

-->
</script>


<div><a href="javascript:Show_Stuff(display1)">Link #1 (Hyperlink)</a></div>
<span ID="display1" style="display: none">
<table bgcolor="#cccccc">
<tr><td width='200' wrap>
This is the table that will appear when link #1 is clicked.
You can add in a <a target="_blank" href="http://www.yahoo.com">hyperlink</a>
or any other html
</td>

</tr>
</table>
</span>


<div><a href="javascript:Show_Stuff(display2)">Link #2 (Hyperlink)</a></div>
<span ID="display2" style="display: none">
<table bgcolor="#ffcc00">
<tr><td width='200' wrap>
This is the table that will appear when link #2 is clicked.
You can add in a <a target="_blank" href="http://www.google.com">hyperlink</a>
or any other html
</td>

</tr>
</table>
</span>