免费资源部落

多级菜单

在original Suckerfish一级下拉菜单的免费教程中我们制作了一个一级下拉菜单，但是只要我们稍微扩充一下我们的话题，我们可以使用 CSS创建一个多级的下拉菜单。

与original Suckerfish JavaScript中代码不同的是，'sfHover' 函数适用于所有的Nav中的li元素的行为，而不是仅仅是直接的子菜单。所以多级的下拉菜单在Internet Explorer是很有可能实现的。

好吧，让我们开始吧。我们将要处理的列表代码将会如下面这样：

<ul id="nav">
<li><a href="#">Percoidei</a>
    <ul>
        <li><a href="#">Remoras</a>
            <ul>
                <li><a href="#">Echeneis</a></li>
                <li><a href="#">Phtheirichthys</a></li>
                <li><a href="#">Remora</a></li>
                <li><a href="#">Remorina</a></li>
                <li><a href="#">Rhombochirus</a></li>
            </ul>
        </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>
    <!-- etc. -->
</li>

<!-- etc. -->

</ul>

这里有一些东西我们需要往一级下拉菜单模式中添加。首先，这个第三等级的列表（在演示中的'Echeneis, 'Phtheirichthys'等等）需要在反应列表的边上（如演示中的'Remoras'），所以我们需要添加适用于第一个下拉显示时所有的列表项目。

#nav li ul ul {
    margin: -1em 0 0 10em;
}

因为我们无法准确地知道绝对位置Box的上边距，所以它们将会被设置在显示出来的列表下面。这就是为什么这个下一级的top margin 需要设置为-1em。但是这样的话同样无法将这个菜单拉伸足够远到反应列表边上。因为默认的高度比 1em 更大(一般是 1.2em), 所以我们需要添加在ul的CSS规则中添加一些东西。

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

由于继承了第二等级列表显示出来的特性，这个第三等级列表也会被显示出来。我们同样需要调整这个第三等级的高度（记住我们需要重复写出:hover pseudo class 带.sfhover class属性。）

#nav li:hover ul ul, #nav li.sfhover ul ul {
    left: -999em;
}

现在我们需要调整一下规则， 以便当反应列表项目显示出来通过显示下拉菜单（在一级下拉菜单中是这样的：#nav li:hover ul, #nav li.sfhover ul { left: auto; }）：

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

这里就是二级下拉菜单演示： two level dropdown menu.

好了，按照上面提到的方法，你可以制作出你想要的不同等级的下拉菜单，二级下拉菜单、三级下拉菜单、多级下拉菜单等等。这里是三级下拉菜单演示： three levels of dropdowns:

#nav li: hover ul ul,
#nav li: hover ul ul ul,
#nav li.sfhover ul ul,
#nav li.sfhover ul ul ul {
	left: -999em;
}

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

添加下面的代码就可以拥有四级下拉菜单了:

#nav li: hover ul ul,
#nav li: hover ul ul ul,
#nav li: hover ul ul ul ul,
#nav li.sfhover ul ul,
#nav li.sfhover ul ul ul,
#nav li.sfhover ul ul ul ul {
	left: -999em;
}

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

演示：这里是多级下拉菜单演示： vertical menu

Via：Htmldog

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