在前端开发中，折叠菜单是一种常见的 UI 组件。当页面宽度较小，无法展示全部菜单时，就需要将菜单隐藏起来，通过点击展开按钮来显示菜单。而如何使用 CSS Flexbox 来实现响应式折叠菜单呢？本文将为大家详细讲解。
Flexbox 简介
Flexbox 是 CSS3 中新增的一种布局模式，用于更加灵活地布局网页组件。通过设置容器和项目的属性，可以实现弹性盒子布局。Flexbox 的特点如下：
- 可以快速排列各个项目，从而有效地实现网页布局。
- 可以在不定尺寸的容器中进行对齐和分布。这样就可以实现响应式设计，自适应各种设备。
- 可以通过设置属性，来调整不同手机和笔记本电脑的显示效果。
实现原理
折叠菜单的实现原理如下：
- 在较宽的屏幕上，将菜单列表展示为一个水平排列的菜单。
- 在较窄的屏幕上，将菜单列表折叠起来，通过点击展开按钮来显示隐藏的菜单。
实现步骤
下面是使用 CSS Flexbox 实现响应式折叠菜单的具体步骤：
- 创建 HTML 结构
首先，在 HTML 中创建菜单的结构。最外层是一个 div 容器，里面包含一个标题和一个菜单列表。这个标题是一个按钮，用于展开和隐藏菜单列表。
-- -------------------- ---- -------
---- ---------------------
------- --------------------------------
--- ------------------
-------------
--------- -------
----------------
-------------
-----
------- 设置 CSS 样式
接下来，给这些 HTML 元素添加 CSS 样式。首先，给容器设置 display: flex，以启用 Flexbox。
然后，设置容器的 flex-direction 属性为 row，这将使容器的子元素在水平方向排列。同时，将菜单列表设为 display: none，以便在页面刚加载时隐藏它。
最后，设置 @media 查询，当窗口的宽度小于 768 像素时，可以折叠菜单。这个查询中，将容器的 flex-direction 属性改为 column，使子元素在垂直方向上排列。
-- -------------------- ---- -------
------------- -
-------- -----
-
----------- -
-------- ----- -- -------- --
-
---------- -
-------- ----- -- ---- --
-
-- ----------- -------------- --- ------ --
------ ------ --- ----------- ------ -
------------- -
--------------- -------
-
---------- -
-------- ------ -- ---- --
-
----------- -
-------- ------ -- -------- --
-
-- 添加 JavaScript 事件
最后，在 JavaScript 中添加一个事件监听器。当用户单击菜单标题按钮时，折叠菜单应该显示或隐藏。
-- -------------------- ---- -------
----- ------- - --------------------------------------
----- -------- - -------------------------------------
--------------------------------- ---------- -
-- ----------------------- --- ------- -
-- ----
---------------------- - --------
- ---- -
-- ----
---------------------- - -------
-
---示例代码
下面是完整的 HTML/CSS/JS 代码，以便更好地理解和实践：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ---------- -------- ------------------
-------
------------- -
-------- -----
-
----------- -
-------- ----- -- -------- --
-
---------- -
-------- ----- -- ---- --
-
-- ----------- -------------- --- ------ --
------ ------ --- ----------- ------ -
------------- -
--------------- -------
-
---------- -
-------- ------ -- ---- --
-
----------- -
-------- ------ -- -------- --
-
-
--------
-------
------
---- ---------------------
------- --------------------------------
--- ------------------
-------------
--------- -------
----------------
-------------
-----
------
--------
----- ------- - --------------------------------------
----- -------- - -------------------------------------
--------------------------------- ---------- -
-- ----------------------- --- ------- -
-- ----
---------------------- - --------
- ---- -
-- ----
---------------------- - -------
-
---
---------
-------
-------结语
通过本文的介绍，相信大家已经了解了如何使用 CSS Flexbox 实现响应式折叠菜单。当然，具体的实现方式还要根据不同的项目需求而定。希望本文对前端开发者们有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6781965d935627c900e070f4