Thread: Javascript Menu System

Hey guys,
I'm trying to create a javascript popup menu, I have the CSS showing the binding divider at the bottom of the page with hidden menus inside, now I tried the following lines of code to show the popups and then hide them but as you can guess the timeouts mess up.

Can anyone suggest a method> The idea is you roll over the divider on the bar and the popup will appear, if you then mouse out of the divider it will give a 3 second count and then hide, but if the mouse is on the menu popup then it should stay open

PHP Code:

BOTTOMTIMER = null;
var BOTTOMBARLAYERS = ['bottombar_activepetdetails', 'bottombar_messagesdetails'];

function showbottombar(POPUP){
    for (var i = 0; i < BOTTOMBARLAYERS.length; i++){
        var ELE = document.getElementById(BOTTOMBARLAYERS[i]);
        if (ELE){
            if (ELE.style.display = 'block')ELE.style.display = 'none';
        }
    }
    document.getElementById(POPUP).style.display = 'block';
}
function hidebottombars(){
    clearTimeout(BOTTOMTIMER)
    for (var i = 0; i < BOTTOMBARLAYERS.length; i++){
        var ELE = document.getElementById(BOTTOMBARLAYERS[i]);
        if (ELE){
            if (ELE.style.display = 'block')ELE.style.display = 'none';
        }
    }
}

function bottombar_iconoff(){
    BOTTOMTIMER = setTimeout(hidebottombars, 3000);
}

function bottombar_subon(){
    clearTimeout(BOTTOMTIMER)
} 


HTML Code:

<div id="bottombar_activepetdetails" class="bottombarpopup" onmouseout="hidebottombars();" onmouseover="bottombar_subon();">
		
		<img src="/images/pets/staff/neomaximus2k.gif" width="200" height="200" alt="staff" title="Elmadore" />
</div>
<div id="bottombar_messagesdetails" class="bottombarpopup" onmouseout="hidebottombars();" onmouseover="bottombar_subon();">
	You have no messages
</div>

<div id="bottomalertbar"><div id="alertbarbase"><div id="alerbarbaseleft"><div id="alertbarbaseright">
	<div id="alertbar_messages" onmouseover="showbottombar('bottombar_messagesdetails');" onmouseout="bottombar_iconoff();"><img src="/images/bottommail.gif" border="0" title="You have 0 new messages" /></div>
	
	
	<div id="alertbar_pet" onmouseover="showbottombar('bottombar_activepetdetails');" onmouseout="bottombar_iconoff();"><a onclick="alertbar_activepet();">Elmadore</a> <img src="/images/icons/health.gif" alt="Health :" width="25" height="25" style="vertical-align:text-bottom;" />15/15 

<img src="/images/icons/hunger.gif" alt="Hunger : " width="25" height="25" style="vertical-align:text-bottom;" />25/100</div>


	<div id="alertbar_notices"><a onclick="alertbar_shownotices();"><img src="/images/notice.gif" border="0" title="Click here to view your notifications" /></a></div>

	<div id="alertbar_money"><img src="/images/icon_tc.gif" width="16" height="16" alt="TC :" style="vertical-align:text-bottom" /> 977963</div>


</div></div></div></div>