JavaScript menu onmouseout issue

Question

I'm trying to create a JavaScript (preferably not jQuery btw) website menu which downs a drop down of sub-links when each menu item is hovered over. I almost have it fully functional but I've hit a bit of a wall and can't find a solution online.

On the menu button, I have an onmouseover event that shows and animates the sub-link panel. If you mouse out/onto another menu button the panel will disappear and a new one will appear if you've hovered over another menu button. The issue is, when you move your mouse from the desired menu button onto the respective panel it disappears, obviously because there's an onmouseout event on the menu button to do just that! I need the onmouseout on the button but how can I prevent it from firing the hide function when the mouse moves over the panel?

I've tried to think of a way around this but I've failed so far so any help would be greatly appreciated!

Thanks,

Andy

<script type="text/javascript">

    var anim = new Animator();

    function Animator() {

        this.slideDown = function (element, height) {

            var e = document.getElementById(element);
            var counter = 0;
            e.style.display = 'block';

            var interval = window.setInterval(function () {
                counter += 2;
                e.style.height = counter + 'px';

                if (counter >= height) {
                    clearInterval(interval);
                }
            }, 1);

        };

        this.hideSlide = function (element) {
            var e = document.getElementById(element);
            e.style.display = 'none';
            e.style.height = 0 + 'px';
        }
    }

</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divMenuBar">
    <div class="menuButton" onmouseover="anim.slideDown('divMenu1', 305);" onmouseout="anim.hideSlide('divMenu1');">Click Me</div>
    <div id="divMenu1" class="slidingMenu menu1">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
            <li>Option 5</li>
            <li class="end">Option 6</li>
        </ul>
    </div>
    <div class="menuButton" onmouseover="anim.slideDown('divMenu2', 305);" onmouseout="anim.hideSlide('divMenu2');">Click Me</div>
    <div id="divMenu2" class="slidingMenu menu2">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
            <li>Option 5</li>
            <li class="end">Option 6</li>
        </ul>
    </div>
    <div class="menuButton" onmouseover="anim.slideDown('divMenu3', 305);" onmouseout="anim.hideSlide('divMenu3');">Click Me</div>
    <div id="divMenu3" class="slidingMenu menu3">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
            <li>Option 5</li>
            <li class="end">Option 6</li>
        </ul>
    </div>
    <div class="menuButton" onmouseover="anim.slideDown('divMenu4', 305);" onmouseout="anim.hideSlide('divMenu4');">Click Me</div>
    <div id="divMenu4" class="slidingMenu menu4">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
            <li>Option 5</li>
            <li class="end">Option 6</li>
        </ul>
    </div>
</div>
</form>

Maybe you have to make subpanel be a submember or the button himself (DOM hierarchy) so when you're over subpanel, you're always over the button (div) himself. — F. Hauri - Give Up GitHub

Mike Clark Mike Clark · Accepted Answer · 2013-01-28T16:52:57

I am sure that you have your reasons for not wanting to use jQuery (or other UI frameworks) so I will not push that issue. But in general, you will have to write your code similar to how those frameworks do their menus.

Rather than blindly hiding an element on mouseout as you are doing now, you instead need to build in logic to see what the mouse is now over, and if it is over a child panel, it needs to maintain the panel visibility. This can get rather sticky if you start getting into sub-menus.

But however you write it, there is no free lunch here. Your buttons and menu panels will need to know about each other and how they relate. And you will have to make explicit decisions about what to hide and show and when.

JavaScript menu onmouseout issue

1 Answers