Question

In this nav bar I’m working on, I have a div appear when you mouse over a button and it disappears when you mouse out of it. Problem is, when I mouse out of the button and move down into the appearing div, I don’t want the div to disappear since it contains links. I want it to only disappear when I mouse out of the button (not onto the appearing div) and out of the appearing div.

I’m using the OnMouseOver and OnMouseOut functions for this.

What if statement do I use inside the else statement that will allow me to do what I’m looking for (as described above)?

The javascript:

function showlayer(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none" || myLayer.style.display==""){
myLayer.style.display="block";
} else { 
myLayer.style.display="none";
}
}

The HTML:

<div id="topBar">
    <div id="navContainer">
    (...)
    <a href="#" class="nav" onmouseover="javascript:showlayer('commLinks')" onmouseout="javascript:showlayer('commLinks')"><div class="communityBtn">Community</div></a>

<div id="subnavLayer">
<div class="commHidden" id="commLinks">
    <div class="commLinksText">Booster Club</div>
    <div class="commLinksText">PTO</div>
    <div class="commLinksText">Fine Arts</div>
    <div class="commLinksText">City of West Branch</div>
</div>

Answer 1

I think people usually accomplish this sort of thing by making the popup nav be a child node of the heading. That way when the user mouses over the popup’s options, the mouse is still technically inside the heading and doesn’t trigger the mouseout event.

<div id="topBar">
    <div id="navContainer">
    <div class="nav" onmouseover="javascript:showlayer('commLinks')" onmouseout="javascript:showlayer('commLinks')">
        <div class="communityBtn">Community</div>
        <div id="subnavLayer" style="position:absolute">
            <div class="commHidden" id="commLinks">
                <div class="commLinksText">Booster Club</div>
                <div class="commLinksText">PTO</div>
                <div class="commLinksText">Fine Arts</div>
                <div class="commLinksText">City of West Branch</div>
            </div>
        </div>
    </div>
</div>

The best part of structuring your HTML this way is that you can actually get a popup with only CSS and no script at all. Basically you’d have a style looking something like this:

#subnavLayer {
    display:none;
}
.nav:hover #subnavLayer {
    display:block;
}