随着移动设备的普及，响应式设计已经是现代 Web 设计的必备特性之一。在实现响应式设计时，导航栏是一个非常重要的组件。本文将介绍如何使用 Flexbox 布局实现一个支持多种屏幕设备的响应式导航栏。
Flexbox 布局简介
Flexbox 布局是一种用来布局网页元素的 CSS3 模块，它可以使元素在不同屏幕尺寸下自适应排列。Flexbox 布局的主要思想是使用父容器中的 display: flex 属性来定义 Flexbox 的父容器，对子容器应用 flex 属性来控制子容器在布局中的占比和位置。
实现要点
一个响应式导航栏应该具备如下要点：
- 当网页宽度大于一定值时，显示完整的导航栏菜单；
- 当网页宽度小于一定值时，隐藏部分菜单项，使用菜单栏按钮（汉堡菜单）代替；
- 当菜单栏按钮被点击时，显示或者隐藏菜单项。
下面来逐个实现这些要点。
1. 显示完整导航栏
当网页宽度大于 800px 时，我们需要完整显示导航栏。为此，我们可以在父容器中定义 display: flex，并使用 flex 属性来控制每个菜单项的宽度和位置。
---- ------------ -- -------- ------------------------ -- -------- ------------------------ -- -------- ------------------------ -- -------- ------------------------ ------
---- - -------- ----- ---------------- ------------- ------------ ------- - ---------- - ---------- -- ----------- ------- -
上面的代码中，我们将 .nav 容器的 display 属性设置为 flex，使其成为 Flexbox 父容器。justify-content 属性设置子容器的对齐方式为居中对齐，align-items 属性设置子容器在交叉轴上的对齐方式为居中对齐。.nav__item 的 flex-grow 属性设置为 1，表示每个菜单项的宽度应该随着父容器宽度的变化而变化，从而保证菜单项均分宽度和居中对齐。
2. 使用菜单栏按钮
当网页宽度小于 800px 时，我们需要使用菜单栏按钮代替部分菜单项。为此，我们可以创建一个菜单栏按钮，使用 display: none 属性让其在宽屏下不可见，在窄屏下可见。
---- ------------
-- -------- ------------------------
-- -------- --------------------
-- -----------------------------
----
---- --------------------
-- -------- ------------------------
-- -------- ------------------------
-- -------- ------------------------
------
------------------ -
-------- -----
-
------ ----------- ------ -
------------ -
-------- ------
-
------------ -
-------- -----
-
-在上面的代码里，我们在菜单栏中添加了一个菜单栏按钮，即 .nav__toggle，它包含一个菜单栏按钮图标（.nav__toggle-icon）。在宽屏下，.nav__toggle 的 display 属性设置为 none，即不可见；在窄屏下（通过 CSS 媒体查询，max-width 为 800px），我们将其设置为可见，即 display: block。同时，我们使用 .nav__expand 容器来包含剩余的菜单项，在窄屏下将其 display 属性设置为 none，即不可见。这样，在窄屏下，只有菜单栏按钮会显示出来。
3. 显示或隐藏菜单项
当菜单栏按钮被点击时，我们需要显示或隐藏菜单项。为此，我们可以使用 JavaScript，在菜单栏按钮上添加一个点击事件，在事件处理函数中添加或移除 .nav__expand 容器的 display: none 样式。
----- ------ - -------------------------------------- ----- --------- - -------------------------------------- -------------------------------- ---------- - -------------------------------------------------- --
在上面的代码中，我们使用 document.querySelector() 方法选择菜单栏按钮（.nav__toggle）和菜单栏容器（.nav__expand）。在菜单栏按钮上添加点击事件处理函数，在函数中使用 classList.toggle() 方法在 .nav__expand 容器上添加或移除 .nav__expand--visible 样式。.nav__expand--visible 样式设置的是显示菜单容器的样式。
完整代码
HTML 代码：
---- ------------
-- -------- ------------------------
-- -------- --------------------
-- -----------------------------
----
---- --------------------
-- -------- ------------------------
-- -------- ------------------------
-- -------- ------------------------
------
------CSS 代码：
---- -
-------- -----
---------------- -------------
------------ -------
-
---------- -
---------- --
----------- -------
-
------------ -
-------- -----
-
------ ----------- ------ -
------------ -
-------- ------
-
------------ -
-------- -----
-
-
--------------------- -
-------- -----
-
----------------- -
-------- -------------
------ -----
------- -----
----------- --------------- ------ ----------
-JavaScript 代码：
----- ------ - -------------------------------------- ----- --------- - -------------------------------------- -------------------------------- ---------- - -------------------------------------------------- --
总结
在本文中，我们学习了如何使用 Flexbox 布局实现一个支持多种屏幕设备的响应式导航栏。通过掌握本文介绍的基本技能，我们可以在实际 Web 开发中更好地应用响应式设计，提高网站在不同设备上的用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646eaf1b968c7c53b0d061b1