Show/Hide menu and content

[surreal5335]

Here is another show and hide script that also includes a script for creating a navigation menu w/submenu.

Each line of code has a comment explaining what its purpose is, making alterations to the code much easier.


<script type="text/javascript">

var CurrentMenu = "SubMenu1";

function ShowSubMenu(Element) {

// When we hover over a main menu button hide any side content
document.getElementById(CurrentSideContent).style.display = "none";

// If we don't want a submenu shown, pass 'none' to this function
if(Element != 'none') {

// Hide the current submenu that is being shown
document.getElementById(CurrentMenu).style.display = "none";

// Show the new submenu
document.getElementById(Element).style.display = "block";

// Set the current open submenu
CurrentMenu = Element;
} else {

// If no submenu is to be displayed, then hide the current submenu and show nothing
document.getElementById(CurrentMenu).style.display = "none";
}
}

var CurrentSideContent = "SideContent1";

function ShowSideContent(Element) {

// Hide the current side content that is being shown
document.getElementById(CurrentSideContent).style.display = "none";

// Show the new side content
document.getElementById(Element).style.display = "block";

// Set the current open side content
CurrentSideContent = Element;
}
</script>

<div style="width:400px; float:left;">

<a href="#" onmouseover="ShowSubMenu('SubMenu1'); return false;">Menu 1</a>
| <a href="#" onmouseover="ShowSubMenu('SubMenu2'); return false;">Menu 2</a>
| <a href="#" onmouseover="ShowSubMenu('none'); return false;">Menu 3</a>

<div id="SubMenu1" style="display:none;">
<a href="#" onmouseover="ShowSideContent('SideContent1'); return false">Menu 1 - SubMenu 1</a>
| <a href="#" onmouseover="ShowSideContent('SideContent2'); return false">Menu 1 - SubMenu 2</a>
</div>

<div id="SubMenu2" style="display:none;">
<a href="#" onmouseover="ShowSideContent('SideContent3'); return false">Menu 2 - SubMenu 1</a>
| <a href="#" onmouseover="ShowSideContent('SideContent4'); return false">Menu 2- SubMenu 2</a>
</div>

</div>

<div style="width:400px; float:left;">

<div id="SideContent1" style="display:none;">
Menu 1 - SubMenu 1 - Side Content
</div>

<div id="SideContent2" style="display:none;">
Menu 1 - SubMenu 2 - Side Content
</div>

<div id="SideContent3" style="display:none;">
Menu 2 - SubMenu 1 - Side Content
</div>

<div id="SideContent4" style="display:none;">
Menu 2 - SubMenu 2 - Side Content
</div>

</div>


code src: bgellous

happy coding

[bgallegos]

lol it's bgallegos =) thanks

[surreal5335]

ya sorry about that, I was trying to recall from the top of my head