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

Question

网站主菜单中的大多数下拉列表都由Javascript提供支持，它通常在单击或悬停时显示一些包含列表的div元素。但是非Javascript用户就是看不到下拉列表！

我能想到的唯一替代方案是将下拉列表显示为HTMLselect元素，但没有人这样做。有更好的解决方案吗？

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/