如果你正在开发一个响应式网站，那么收缩菜单是必不可少的一个组件。它可以在小屏幕上展示出完整的菜单选项，同时还能让你节省网页的空间。
在本文中，我们将会探讨如何使用 CSS Flexbox 创建一个响应式的收缩菜单，同时它还是可访问性友好的。
Flexbox 基础
在讨论如何实现收缩菜单之前，我们先来回顾一下 CSS Flexbox 的基础知识。
Flexbox 是 CSS 中用来布局和定位元素的一种方法。通过定义父容器和子元素的属性，我们可以实现各种不同的布局方式。
下面是一些比较常用的基础属性：
display: flex： 将元素变成一个 Flex 容器flex-direction： 指定 Flex 子元素排列的方向justify-content： 指定 Flex 子元素在主轴上的对齐方式align-items： 指定 Flex 子元素在交叉轴上的对齐方式
关于 Flexbox 的更多细节，可以参考 CSS Tricks 的指南。
HTML 结构
下面是我们在本文中将要用到的 HTML 结构：
---- ---------------
------- ----------------------
----- ----------------------------------
---------
--- -------------------
--- -----------------
-- -----------------
-----
--- -----------------
-- ------------------
-----
--- -----------------
-- -----------------
-----
--- -----------------
-- --------------------
-----
-----
------在这个结构中，我们有一个 nav 元素，里面包含一个按钮和一个列表。按钮将会用来控制列表的显示和隐藏。
接下来，我们将通过 CSS Flexbox 来实现响应式的收缩菜单。
CSS 样式
首先，我们需要给 nav 元素一个 display: flex 的样式，使其变成一个 Flex 容器。
接着，我们将使用 justify-content: space-between 来让列表与按钮之间有一定的空隙：
------- - -------- ----- ---------------- -------------- -
下一步，我们需要将列表的样式设置为 Flex 布局，并且默认情况下将其隐藏：
----------- - -------- ----- --------------- ------- --------- ------- ----------- -- -
flex-direction: column： 将 Flex 子元素垂直排列overflow: hidden： 将超过列表高度的部分隐藏max-height: 0： 设置默认列表高度为 0
接着，我们需要为按钮添加样式，并且在小屏幕上隐藏它。这可以通过添加媒体查询来实现：
-------------- -
-------- -----
-
------ ----------- ------ -
-------------- -
-------- ------
----------- -----
------- -----
------- --------
-
------------------- -
-------- ------
------ -----
------- -----
----------- ------------------ --------- ------ -------
-
-@media (max-width: 768px)： 添加一个针对小屏幕的媒体查询.navbar-toggle： 一个按钮元素，用来切换菜单的可见性.navbar-toggle-icon： 用来显示菜单的图标
最后，我们需要使用 JavaScript 来控制列表的隐藏和显示：
----- ------------ - -----------------------------------------
----- --------- - --------------------------------------
-------------------------------------- -- -- -
-- --------------------------- -
------------------------- - -----
- ---- -
------------------------- - ---------------------- - -----
-
---这段 JavaScript 代码会在按钮被点击时判断列表是否可见。如果列表是可见的，就将其隐藏；否则，就将其显示出来。
结论
通过使用 CSS Flexbox 和 JavaScript，我们可以创建一个响应式的收缩菜单。这个菜单能够在小屏幕上完美地显示，同时它还是可访问性友好的。
如果你正在开发一个响应式网站，不妨试试使用这种方法来创建一个漂亮的收缩菜单。
示例代码可在 Codepen 中查看。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66ff90901b0bf82c71cc09c0