免费资源部落

Son of Suckerfish下拉菜单已经推出很长一段时间了，现在我们又回到这个话题上来了．我们发现这里有更加简洁的代码（只有12行的Javascript 代码）从而拥有更加强大的能力.(现在它们可以在Opera 和 Safari浏览器正常工作了 )并且还拥有了多级菜单.

一级下拉菜单

好吧,现在让我们回到我们的免费教程来吧.我们将要处理的Html代码将会看起来像下面这样的:

<ul id="nav">
    <li><a href="#">Percoidei</a>
        <ul>
            <li><a href="#">Remoras</a></li>
            <li><a href="#">Tilefishes</a></li>
            <li><a href="#">Bluefishes</a></li>
            <li><a href="#">Tigerfishes</a></li>
        </ul>
    </li>

    <li><a href="#">Anabantoidei</a>
        <ul>
            <li><a href="#">Climbing perches</a></li>
            <li><a href="#">Labyrinthfishes</a></li>
            <li><a href="#">Kissing gouramis</a></li>
            <li><a href="#">Pike-heads</a></li>
            <li><a href="#">Giant gouramis</a></li>
        </ul>
    </li>

    <!-- etc. -->

</ul>

上面是是一个全部的但是没有顺序的列表.

为将这些东西成为有序列表,我们需要一些基本的CSS.

#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#nav a {
    display: block;
    width: 10em;
}

#nav li {
    float: left;
    width: 10em;
}

注意你需要在#nav li 选择器中调整宽度，否则Opera浏览器将会显示不正常．同样，需要记住，因为我们正在使用Floating（浮动属性），因此我们需要将使用 Clear：Left的方法来保证在下拉菜单下面的内容正常显示.

很显然,我们需要将隐藏那些我们想要将它们作为下拉菜单的内容的值班表,但是我们需要避免使用display: none,这个方法一般用在图像代替\从一些屏幕读者中隐藏某些内容的场合.你也许会认为这里会有许多的方法来处理这个,但是通过在无数的浏览器中测试widths, heights, margins, top 和 clip ,最后得出的最佳的解决方法(适用于任何地方的多级菜单列表)是控制这个left属性.

按照CSS教程里所说的那样,这个top, right, bottom 和 left 的值应该可以阻止一个绝对位置的box从它的容器中.但是很不幸的是,Opera浏览器并不支持,而是将相对于页面位置,这就是为什么以前的 original Suckerfish 下拉菜单不能在Opera正常工作了.原因就是它依靠在Top和Left属性.

所以我们决定不使用display: none ,而是使用left: -999em ,来保证下拉菜单可见,使用left: auto (而不是left: 0) 而将它隐藏.

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
}

那些支持:hover pseudo class的浏览器可以正常工作,但是对于Internet Explorer还需要将Suckerfish JavaScript 调整为:

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsBy
TagName("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);

在这里，当我们用鼠标移动或者移除它时，这个'sfhover' class 是作用于li elements 在 t 'nav' id的 ul element 中，当我们移开它时，我们使用了正则表达式．

所以，现在我们已经为Suckerfish创建了新的层，下一步就是重复写出带'sfhover' class 的:hover 选择器．

#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}

这里是一级下拉菜单演示： single-level dropdown menu.

Via:htmldog

文章出自：免费资源部落 / 版权所有。本站文章除明出处外，皆为作者原创文章，可自由引用，但请注明来源。 禁止全文转载