CSS Flexbox 实现响应式收缩菜单的方法

阅读时长 5 分钟读完

如果你正在开发一个响应式网站,那么收缩菜单是必不可少的一个组件。它可以在小屏幕上展示出完整的菜单选项,同时还能让你节省网页的空间。

在本文中,我们将会探讨如何使用 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

纠错
反馈