使用 CSS Flexbox 制作响应式折叠菜单的实例

阅读时长 5 分钟读完

前言

在前端开发中,制作响应式的网站已经成为了一种趋势。而一个好的响应式网站必须要有一个好的导航菜单。本文将介绍如何使用 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 来添加交互功能,使得菜单按钮可以展开和折叠折叠菜单。示例代码如下:

在这段 JavaScript 代码中,我们首先获取菜单按钮和折叠菜单的元素。然后,我们为菜单按钮添加了一个 click 事件监听器。当菜单按钮被点击时,我们使用 classList.toggle() 方法来切换折叠菜单的显示状态。

结语

通过本文的介绍,我们学习了如何使用 CSS Flexbox 制作一个响应式折叠菜单,并提供了示例代码。希望这篇文章对你有所帮助,也希望你能够继续学习和探索前端开发的世界。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67963480504e4ea9bdcdecbb

纠错
反馈