Html 你将如何为手机制作导航栏

如果您想要创建一个包含切换按钮的可访问移动菜单，则需要使用JavaScript.这样做其实很简单，下面是我喜欢使用的一种方法:

超文本标记语言

首先，您需要添加一个按钮元素，用于在<nav>元素中切换菜单.将菜单链接包装在列表元素中以按语义对它们进行分组也是一个好主意.

<header class="header">
  <div class="logo">Waverely Farm</div>
  <nav class="navbar" aria-label="main">
    <button
      class="menu-toggle"
      aria-expanded="false"
      aria-controls="menu"
    >Menu</button>

    <ul id="menu" class="menu" role="list">
      <li>
        <a href="index.html">Home</a>
      </li>
      <li>
        <a href="about_us.html">About Us</a>
      </li>
      <li>
        <a href="services.html">Services</a>
      </li>
      <li>
        <a href="shop.html">Shop</a>
      </li>
      <li>
        <a href="contactus.html">Contact Us</a>
      </li>
    </ul>
  </nav>
</header>

button元素的ARIA属性(从aria-开始)帮助屏幕阅读器用户更好地理解和使用菜单.在这种情况下，aria-expanded表示菜单的状态(打开/关闭).

CSS

我们现在可以使用aria-expanded状态来有条件地在CSS中添加样式.

:where(ul, ol)[role="list"] {
  list-style: none;
}

.menu {
  display: flex;
  flex-wrap: wrap;
}

.menu-toggle {
  display: none;
}

@media screen and (max-width: 600px) {
  .menu-toggle {
    display: initial;
  }
  button[aria-expanded="false"] + ul {
  display: none;
  }
  .menu {
    flex-direction: column;
    flex-wrap: nowrap;
    position: absolute;
    inset: 130px 0 0;
    text-align: center;
  }
  .menu a {
    color: inherit;
  }
}

.menu中的样式只是一个示例，自定义它们以使其看起来像您想要的方式.

JavaScript

最后，为菜单按钮添加EventListener，以将aria-expanded的状态切换到true或false:

const menuButton = document.querySelector(".menu-toggle");

menuButton.addEventListener("click", () => {
  const state = menuButton.getAttribute("aria-expanded") === "false";
  menuButton.setAttribute("aria-expanded", state);
});

我希望这能帮到你.如果有什么不清楚的地方，尽管问.