[Javascript] IE 'css' menus (was: Modern usage)

[Bill Moseley]

On Wed, Apr 19, 2006 at 01:49:41PM -0500, Triche Osborne wrote:
> If you want a pop-out or dropdown effect, JavaScript is necessary for IE 
> because it doesn't support the pseudo-class for LI.

I'm now having problems with event bubbling.  Should this work in IE?

    if ( !e ) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();

The issue is I have pop-up menus and I need onmouseover events on the
top-level <li>.  But I don't want to see onmouseovers on the sub
menus.  Here's an example:


The Suckerfish drop down menus are often cited[1], and they apply
mouseover and mouseout events to <li> tags because IE doesn't do
li:hover.


So for markup:

    <ul id="top-level">
        <li class="popup">
            Menu Item
            <ul>
                <li>sub item 1</li>
                <li>sub item 1</li>
                <li>sub item 2</li>
            </ul>
        </li>

        <li>No sub menu here</li>

        <li class="popup">
            Menu Item
            <ul>
                <li>sub item 1</li>
                <li>sub item 1</li>
                <li>sub item 2</li>
            </ul>
        </li>
    </ul>

For browsers that support li:hover I have:

    li.popup:hover > ul { display: block; }

(don't really need > ul in this example)


For IE, the onmouseover adds class="over" to the li items, and so
the css includes:

    li.over ul { display: block; }


One problem with that is that mouseover and mouseouts events bubble up
when mousing over the *sub* menus.  I've tried stopping the events from
bubbling up, but can't seem to make it work in IE.

Here's a demo of the Suckerfish menus w/o stopping the events.

    http://hank.org/demos/iemenu.html
    http://hank.org/demos/js/iemenu.js

Here's the same thing, but trying to stop the events.  I'm using
Behaviour to apply the events in this example:

    http://hank.org/demos/biemenu.html
    http://hank.org/demos/js/biemenu.js


Do people just not worry about those extra events on elements below
the top-level <li>?



[1] http://www.alistapart.com/articles/dropdowns/

-- 
Bill Moseley
moseley at hank.org