Here's a glimpse of my menu setup:
<div id="header">
<div id="div-back" onClick="#"> </div>
<div id="div-origin" onClick="javascript:showmini('origin');"> </div>
<div id="div-profile" onClick="javascript:showmini('profile');"> </div>
<div id="div-affil" onClick="javascript:showmini('affil');"> </div>
<div id="div-combat" onClick="javascript:showmini('combat');"> </div>
</div>
This is how the CSS for the menu looks like:
#div-back {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/nm_back.png"); width:77px; height:26px; display:inline-block; float:left;}
#div-back:hover {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/on_back.png");}
#div-back:active {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/ac_back.png");}
#div-origin {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/nm_origin.png"); width:176px; height:26px; display:inline-block;float:left;}
#div-origin:hover {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/on_origin.png");}
#div-origin:active {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/ac_origin.png");}
#div-profile {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/nm_profile.png"); width:183px; height:26px; display:inline-block;float:left;}
#div-profile:hover {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/on_profile.png");}
#div-profile:active {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/ac_profile.png");}
Similar coding structure is followed for other div IDs as well, you can refer to the live link below for more details.
The menu is designed to open one div at a time using the following function:
function showmini(holodisp)
{
$('.holodata').each(function(index)
{
if ($(this).attr("id") == holodisp)
{
$(this).fadeIn(500);
}
else
{
$(this).fadeOut(600);
}
});
}
Check out the live webpage to see it in action: website portion
Additionally, each item on the menu has 3 images for rollover effects (normal, hover, and Onclick).
The desired behavior is to retain the hover effect when an item is clicked. Adding an active class to change the background-image attribute was considered, but with 4 items having different background-images, it seemed challenging to implement.