完美的响应式菜单

在电脑端，网站有足够的空间显示完整的菜单，但在移动设备上，空间有限，因此您可能希望将菜单隐藏在切换按钮（例如汉堡图标）后面，并在用户点击该按钮时显示菜单。如何在保持 HTML 代码简洁易懂的同时，避免菜单重复，并确保用户能够轻松访问呢？这就是完美的响应式菜单的作用所在。

虽然汉堡图标现在已经广为人知，但为了更好地帮助不熟悉它的人，你可以将该图标与“菜单”一词一起显示。

本文将向您展示如何创建一个响应式菜单，该菜单在所有视口上都使用相同的 HTML 代码，具有良好的响应性和美观性。完美的响应式菜单。

HTML

我们从HTML开始。

<nav class="navigation">
    <button aria-expanded="false" aria-controls="menu">Menu</button>
    <ul id="menu" hidden>
        <li><a href="/">Home</a></li>
        <li><a href="/benefits">Benefits</a></li>
        <li><a href="/pricing">Pricing</a></li>
        <li><a href="/blog">Blog</a></li>
    </ul>
</nav>

基本菜单可能和您之前写过的一样。它是一个链接列表（一个 `<link>` 标签ul），包裹在一个nav`<link>` 标签内。但有两点不同。

首先，这里有一个额外的按钮。这个按钮有一些你可能不太熟悉的属性：ARIA 属性。通过这些属性，我们可以帮助屏幕阅读器等辅助工具了解按钮的用途。在这个例子中，该按钮控制着 id 为“menu”的元素，并且该元素目前处于未展开状态。

其次，菜单初始状态是隐藏的，使用了hidden相应的属性。之所以初始状态隐藏菜单，是因为我们采用移动优先开发模式，在移动端只显示菜单按钮。

JavaScript

按钮本身不会执行任何操作。为此，我们需要使用 JavaScript。

const toggleMenu = document.querySelector(".navigation button");
const menu = document.querySelector(".navigation ul");

toggleMenu.addEventListener("click", function () {
  const open = JSON.parse(toggleMenu.getAttribute("aria-expanded"));
  toggleMenu.setAttribute("aria-expanded", !open);
  menu.hidden = !menu.hidden;
});

点击按钮后，我们会调用一个函数，该函数会获取“aria-expanded”属性的当前值并将其反转。菜单上的“hidden”属性也会执行相同的操作。该JSON.parse函数帮助我们将属性从字符串转换为真正的布尔值。

此时，该切换开关已能正常工作：

CSS

IE11 及更高版本支持 hidden 属性，但如果您需要支持旧版浏览器，则添加以下 CSS 代码即可实现。（请注意，您可能还需要修改上面的 JavaScript 代码。）

[hidden] { display: none; }

当视口宽度达到一定值时，视口宽度足以隐藏按钮并显示菜单：

@media ( min-width: 40rem ) {
  #navigation button { display: none }
  #menu { display: block }
}

这种情况发生的宽度取决于您的设计和菜单的长度，因此虽然 40rem 对我来说有效，但可能对您无效。

为了演示这一效果，请切换下方示例中的“CSS”面板，它将在仅显示按钮和仅显示菜单之间切换。

最后一步：造型

此时，您可以根据自己的喜好来设置按钮和菜单的样式。您可以根据需要，将其设计得简单或复杂。

例如，Polypane 网站上的移动菜单使用 SVG 图标，并带有动画效果的背景和交错排列的菜单项动画。我改用了 PostCSS（它支持嵌套），以提高可读性。

它不必非得长这样！只需这些 HTML 和 JavaScript 框架，你就可以用 CSS 实现多种不同的样式。你可以选择像下拉菜单一样滑动打开菜单，并将其他内容向下推移；或者，你可以让它像侧边栏一样从左侧滑入。此外，你还可以使用 CSS 变换来实现你想要的任何动画过渡效果。

只要你保持 HTML 代码和 JavaScript 的核心功能完整，你就能拥有一个易于访问、响应迅速的菜单，它在移动设备和宽屏显示器上都使用相同的 HTML 代码。这才是完美的响应式菜单。