Улучшение кода для выпадающего меню (HTML / CSS / JavaScript)

Question

На основе этого урока я создал выпадающее меню для шаблона от Styleshout.com . medigerati помог мне , чтобы он работал сейчас - по крайней мере, в Firefox 3.5 и Internet Explorer 8.

Здесь вы можете увидеть меню в действии.

Но, к сожалению, он работает не во всех браузерах. Например, в Internet Explorer 6 он отображается неправильно.

Не могли бы вы рассказать, как я могу улучшить код, чтобы он работал в других браузерах?

Надеюсь, вы мне поможете. Заранее спасибо!

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

Привязка событий Javascript работает по-разному в разных браузерах. Попробуйте:

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 имеет много хороших статей о событиях.

Answer 2

Вы делаете это как учебное упражнение или вам просто нужно хорошее меню типа навигационной панели? Если последнее, я бы порекомендовал YUI 3.0 MenuNav , который хорошо протестирован на всех основных браузерах, включая IE6.

Answer 3

Посмотрите на виджет панели инструментов Dojo Toolkit . Dojo работает согласованно во всех браузерах и даже предоставляет доступ для пользователей с ограниченными возможностями.

Виджет меню при привязке к странице (как показано в примере) также может быть тем, что вы ищете.