Question

网站中的大多数下拉列表＆＃39;主菜单由Javascript提供支持，通常会在点击或悬停时显示包含列表的一些div元素。但非Javascript用户无法看到下拉列表！

我能想到的唯一选择是将下拉列表显示为HTML select元素，但没有人这样做。那里有更好的解决方案吗？

Answer 1

非JavaScript菜单非常常见，而且往往同样干净，并且比JavaScript对应的菜单效率更高。您可以使用JavaScript，但如果您希望您的菜单对所有用户都可访问并且功能正常，那么优雅降级非常重要。

这些在线有很多例子，但基本前提是有一个普通的导航菜单（使用UL和LI元素），并使用CSS根据用户交互（例如悬停）改变外观和外观。

以下是一个基本菜单的示例，该菜单可以在没有CSS或JavaScript的情况下使用，并且仍然可以完全使用（从这个答案中获取的一些代码：https://stackoverflow.com/a/12279190/937012）

<div class="wrapper">
    <navigation role="navigation" class="primary-nav">
        <ul role="menubar">
            <li role="presentation">
               <a role="menu-item" href="#" title="First Link">First Link</a>
            </li>
            <li role="presentation" class="sub-container"> <a role="menu-item" aria-haspopup="true" href="#" title="Second Link">Second Link</a>
                <ul role="menu">
                    <li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 1">Sub Item 1</a>
                    </li>
                    <li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 2">Sub Item 2</a>
                    </li>
                    <li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 3">Sub Item 3</a>
                    </li>
                </ul>
            </li>
            <li role="presentation">
                <a role="menu-item" href="#" title="Third Link">Third Link</a>

            </li>
        </ul>
    </navigation>
</div>

按原样，这将创建一个跨浏览器且可访问的导航菜单（使用一些辅助功能属性）。您可以在此处详细了解辅助功能最佳做法：https://www.webaccessibility.com/best_practices.php

然后，您可以应用您喜欢的任何CSS来更改外观并提供所需的“下拉”效果。

以上是一些用于上述标记的CSS，它生成一个水平菜单，当鼠标移动到第二个列表项上时，该菜单具有显示在第二个链接下方的子菜单。

A {
    text-decoration: none;
}
A:HOVER {
    color: blue;
}
.wrapper {
    width: 90%;
    display: block;
}
.primary-nav {
    display: block;
    margin: 0px auto;
    width: 100%;
    padding: 0px;
}
.primary-nav UL {
     background-color: #ababcd;
    list-style-type: none;
    margin-left: 0px;
    padding-left: 0px;
    text-indent: 0px;
}
.primary-nav > UL {
    display: inline;
    border: solid 1px #000000;
    text-indent: 0px;
    float: left;
    height: 24px;
    margin: 0px;
    width: 100%;
    list-style-type: none;
    border-collapse: collapse;
}
.primary-nav LI {
    max-width: 150px;
    text-align: center;
}
.primary-nav > UL LI {
    display: inline;
    float: left;
    padding: 0px 3px 0px 3px;
    width: 32%;
    line-height: 24px;
    vertical-align: top;
    margin-top: 0px;
    text-align: center;
}
.primary-nav > UL LI UL {
    display: none;
    width: 100%;
}
.primary-nav > UL LI.sub-container:HOVER UL {
    display: inline-block;
    float: left;
    margin-left: 0px;
    clear: both;
    border: inset 1px #898989;
    box-shadow: 2px 2px 4px #000000;
}
.primary-nav > UL LI.sub-container:HOVER UL LI {
    margin-top: 2px;
    text-align: left;
    clear: both;
    width: 100%;
    padding: 0px;
}
.primary-nav LI A:HOVER {
    background-color: #cdcdef;
}
.primary-nav LI A {
    display: block;
}
.primary-nav > UL LI.sub-container:HOVER UL LI A {
    padding: 1px 3px;
    margin: 0px 3px;
}

这是一个拼凑起来的小提琴：http://jsfiddle.net/xDaevax/osu7t9ty/

用于辅助功能的Javascript支持下拉列表的替代方案

1 个答案: