Flexbox 布局实例 —— 实现支持多种屏幕设备的响应式导航栏

阅读时长 7 分钟读完

随着移动设备的普及,响应式设计已经是现代 Web 设计的必备特性之一。在实现响应式设计时,导航栏是一个非常重要的组件。本文将介绍如何使用 Flexbox 布局实现一个支持多种屏幕设备的响应式导航栏。

Flexbox 布局简介

Flexbox 布局是一种用来布局网页元素的 CSS3 模块,它可以使元素在不同屏幕尺寸下自适应排列。Flexbox 布局的主要思想是使用父容器中的 display: flex 属性来定义 Flexbox 的父容器,对子容器应用 flex 属性来控制子容器在布局中的占比和位置。

实现要点

一个响应式导航栏应该具备如下要点:

  • 当网页宽度大于一定值时,显示完整的导航栏菜单;
  • 当网页宽度小于一定值时,隐藏部分菜单项,使用菜单栏按钮(汉堡菜单)代替;
  • 当菜单栏按钮被点击时,显示或者隐藏菜单项。

下面来逐个实现这些要点。

1. 显示完整导航栏

当网页宽度大于 800px 时,我们需要完整显示导航栏。为此,我们可以在父容器中定义 display: flex,并使用 flex 属性来控制每个菜单项的宽度和位置。

-- -------------------- ---- -------
---- -
  -------- -----
  ---------------- -------------
  ------------ -------
-
---------- -
  ---------- --
  ----------- -------
-
展开代码

上面的代码中,我们将 .nav 容器的 display 属性设置为 flex,使其成为 Flexbox 父容器。justify-content 属性设置子容器的对齐方式为居中对齐,align-items 属性设置子容器在交叉轴上的对齐方式为居中对齐。.nav__itemflex-grow 属性设置为 1,表示每个菜单项的宽度应该随着父容器宽度的变化而变化,从而保证菜单项均分宽度和居中对齐。

2. 使用菜单栏按钮

当网页宽度小于 800px 时,我们需要使用菜单栏按钮代替部分菜单项。为此,我们可以创建一个菜单栏按钮,使用 display: none 属性让其在宽屏下不可见,在窄屏下可见。

-- -------------------- ---- -------
---- ------------
  -- -------- ------------------------
  -- -------- --------------------
    -- -----------------------------
  ----
  ---- --------------------
    -- -------- ------------------------
    -- -------- ------------------------
    -- -------- ------------------------
  ------
------
展开代码
-- -------------------- ---- -------
------------ -
  -------- -----
-
------ ----------- ------ -
  ------------ -
    -------- ------
  -
  ------------ -
    -------- -----
  -
-
展开代码

在上面的代码里,我们在菜单栏中添加了一个菜单栏按钮,即 .nav__toggle,它包含一个菜单栏按钮图标(.nav__toggle-icon)。在宽屏下,.nav__toggledisplay 属性设置为 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

纠错
反馈

纠错反馈