前言
在前端开发中，制作响应式的网站已经成为了一种趋势。而一个好的响应式网站必须要有一个好的导航菜单。本文将介绍如何使用 CSS Flexbox 制作一个响应式折叠菜单，并提供示例代码。
Flexbox 简介
CSS Flexbox 是一种用于布局的 CSS3 模块。它可以让开发者更加方便地对元素进行布局，并且支持响应式布局。
Flexbox 布局的基本概念是，将容器（即父元素）分为一行或一列的若干个子元素，然后通过设置子元素的属性来控制它们的位置、尺寸和间距。Flexbox 布局的优点是，可以很方便地实现自适应布局，而不需要使用复杂的 CSS 或 JavaScript。
制作响应式折叠菜单
下面我们将使用 Flexbox 布局来制作一个响应式折叠菜单。
HTML 结构
首先，我们需要创建一个 HTML 结构，它包含一个导航栏和一个折叠菜单。示例代码如下：
-- -------------------- ---- ------- -------- ----- ---- ------ -------------------- ------ -------------------- ------ -------------------- ------ ---------------------- --- --------------- -------------------- ----- ---- ------------------- ---- ------ -------------------- ------ -------------------- ------ -------------------- ------ ---------------------- ----- ------ ------ ---------展开代码
在这个 HTML 结构中，我们创建了一个 header 元素，其中包含一个 nav 元素，nav 元素包含一个 ul 元素和一个 div 元素。ul 元素包含了若干个 li 元素，每个 li 元素包含一个 a 元素，用于显示导航栏的链接。最后一个 li 元素的 class 属性为 “menu”，表示这是一个菜单按钮。
div 元素的 class 属性为 “menu-items”，表示这是一个折叠菜单。它包含了一个 ul 元素，用于显示折叠菜单的链接。
CSS 样式
接下来，我们需要为 HTML 结构添加 CSS 样式。示例代码如下：
-- -------------------- ---- ------- --- - -------- ----- ---------------- -------------- ------------ ------- -------- ----- ----------------- ----- ------ ----- - -- - -------- ----- ----------- ----- - -- - ------------- ----- - - - ------ ----- ---------------- ----- - ----------- - -------- ----- --------- --------- ---- ----- ----- -- ------ -- ----------------- ----- ------ ----- - ----------- -- - -------- ----- --------------- ------- -------- -- - ----------- -- - ------- -- - ----------- - - -------- ------ -------- ----- - ----- - -------- ----- - ------ ------ --- ----------- ------ - ----- - -------- ------ - -- - -------- ----- - ----------- - -------- ------ - -展开代码
在这个 CSS 样式中，我们首先为 nav 元素添加了一些样式，包括 display: flex;、justify-content: space-between; 和 align-items: center;。这些样式可以让导航栏在屏幕上水平居中，并且让菜单按钮和导航栏链接垂直居中。
接下来，我们为 ul 元素和 li 元素添加了一些样式，包括 display: flex; 和 list-style: none;。这些样式可以让导航栏链接在一行中水平排列，并且去掉了默认的列表样式。
我们还为菜单按钮和折叠菜单添加了一些样式。其中，菜单按钮的样式为 .menu { display: none; }，表示在屏幕宽度较大时，菜单按钮不显示。折叠菜单的样式为 .menu-items { display: none; }，表示在屏幕宽度较大时，折叠菜单不显示。
最后，我们使用媒体查询来控制菜单按钮和折叠菜单的显示。当屏幕宽度小于等于 768 像素时，菜单按钮显示，导航栏链接隐藏，折叠菜单显示。
JavaScript 交互
最后，我们需要使用 JavaScript 来添加交互功能，使得菜单按钮可以展开和折叠折叠菜单。示例代码如下：
const menu = document.querySelector('.menu'); const menuItems = document.querySelector('.menu-items'); menu.addEventListener('click', () => { menuItems.classList.toggle('show'); });
在这段 JavaScript 代码中，我们首先获取菜单按钮和折叠菜单的元素。然后，我们为菜单按钮添加了一个 click 事件监听器。当菜单按钮被点击时，我们使用 classList.toggle() 方法来切换折叠菜单的显示状态。
结语
通过本文的介绍，我们学习了如何使用 CSS Flexbox 制作一个响应式折叠菜单，并提供了示例代码。希望这篇文章对你有所帮助，也希望你能够继续学习和探索前端开发的世界。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67963480504e4ea9bdcdecbb
