Question

Question about logics here:

What’s the most elegant way to make the menu appear/disappear onmouseover/onmouseout?

See the following JsBin:

http://jsbin.com/owayeb/edit#source

The Menu is hidden by default.

If the user moves his cursor above the Link the showme() function gets called.

When the user moves his cursor away the hideme() functions gets called.

How would I get the Menu to persist while the user moves his mouse away from the Link to above the Menu?

Or is this all the wrong school of thought?

Answer 1

Assuming this is for cascading navigation or something similar, I would do something like…

<style type="text/css">
ul#nav li {
    position: relative;
    height: 20px;
}
ul#nav li ul {
    display: none;
    position: absolute;
    top: 20px;
}
ul#nav li.selected ul { display: block; }
</style>

<ul id="nav">
<li>
    <a href="#" title="Link">Link</a>
    <ul>
        <li><a href="#" title="">Hi There!</a></li>
        <li><a href="#" title="">Secone Nav Item</a></li>
        ...
    </ul>
</li>
</ul>

Within the onmouseover state of your list items, you would add the .selected class to #nav thus causing all child UL’s to be displayed. Because the child UL elements are within ul#nav, your hover state will still be active while you’re rolling over the children.

You’ll obviously need to tweak the CSS to match the desired look you want, but that’s the general idea. If you were using prototype js for example, your javascript would look something like…

$$('#nav li').each(function(x) {
    x.onmouseover = function() { $(this).addClassName('selected'); }
    x.onmouseout = function() { $(this).removeClassName('selected'); }
});