Improve code for drop down menu (HTML/CSS/JavaScript)

Question

Hello!

Based on this tutorial, I've built a drop down menu for template from Styleshout.com. medigerati helped me so that it works now - at least in Firefox 3.5 and Internet Explorer 8.

You can see the menu in action here.

But unfortunately, it doesn't work well in all browsers. In Internet Explorer 6 - for example - it isn't displayed correctly.

Could you please tell me how I can improve the code to make it work in more browsers?

I hope you can help me. Thanks in advance!

HTML:

<ul id="nav">
    <li><a href="index.html">Nav #1</a>
        <ul>
            <li><a href="#">Nav #1.1</a></li>

            <li><a href="#">Nav #1.2</a></li>
        </ul>
    </li>
    <li><a href="index.html">Nav #2</a>
        <ul>
            <li><a href="#">Nav #2.1</a></li>
            <li><a href="#">Nav #2.2</a></li>

        </ul>
    </li>
    <li><a href="index.html">Nav #3</a>
        <ul>
            <li><a href="#">Nav #3.1</a></li>
            <li><a href="#">Nav #3.2</a></li>
        </ul>

    </li>
</ul>

CSS:

ul#nav li ul {
    position: absolute;
    left: -9999px;
    top: 100%;
    display: block;
    width: 100px;
    background-color: transparent;
}
ul#nav li {
    position: relative;
    float: left;
}
/* Links in the drop down lists start */
ul#nav li ul li a {
    clear: left;
    display: block;
    text-decoration: none;
    width: 100px;
    background-color: #333;
}
/* Links in the drop down lists end */
/* Making visible start */
ul#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}
/* Making visible end */

JavaScript:

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Answer 1

Look at the Dojo Toolkit toolbar widget. Dojo works consistently across all browsers, and even provides accessibility for handicapped users.

The menu widget when anchored to the page (as seen in the example) may also be what you're looking for.

Answer 2

Javascript event binding works differently in different browsers. Try:

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        addEvent(sfEls[i], "mouseover", function() {
            this.className+=" sfhover";
        });
        addEvent(sfEls[i], "mouseout", function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        });
    }
}

function addEvent(el, name, func) {
    if (el.attachEvent)
        el.attachEvent("on" + name, func);
    else
        el.addEventListener(name, func, false);
}

addEvent(window, "load", sfHover);

Quirksmode.org has a lot of good articles about events.

Answer 3

Are you doing this as a learning exercise, or do you just want a good nav-bar type menu? If the latter, I would recommend YUI 3.0’s MenuNav, which is well-tested against all major browsers, including IE6.