Question

根据this tutorial，我为template from Styleshout.com建立了一个下拉菜单。 medigerati helped me以便现在可以使用 - 至少在Firefox 3.5和Internet Explorer 8中。

You can see the menu in action here.

但不幸的是，它并不适用于所有浏览器。在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 toolbar widget。 Dojo在所有浏览器中都能保持一致，甚至为残障用户提供可访问性。

锚定到页面时的menu widget（如示例中所示）也可能是您正在寻找的内容。

改进下拉菜单的代码（HTML / CSS / JavaScript）

3 个答案: