Flexbox 布局实现响应式导航菜单-JavaScript中文网-JavaScript教程资源分享门户

伴随着移动设备的普及，响应式设计已经成为了前端开发重要的一部分，而响应式导航菜单是响应式设计的核心之一。在本篇文章中，我们将介绍使用Flexbox布局实现响应式导航菜单的方法和技巧。

什么是Flexbox布局

Flexbox布局是CSS3中的一种新型布局模式，通过在容器和子元素之间建立"盒子模型"，使得布局更加灵活、自适应和响应式。Flexbox布局使得我们可以更简单、更快速地实现不同尺寸、不同设备上的布局效果。

响应式导航菜单的实现

1. HTML结构

我们需要先构建HTML结构，来实现响应式导航菜单。HTML结构包含了三个主要元素：导航容器、导航主体和导航链接。

// www.javascriptcn.com code example
<div class="navbar">
  <div class="navbar__body">
    <div class="navbar__brand">Brand</div>
    <button class="navbar__toggle" aria-expanded="false">
      <span class="navbar__toggle-icon">&nbsp;</span>
    </button>
    <ul class="navbar__links">
      <li class="navbar__link"><a href="#">Home</a></li>
      <li class="navbar__link"><a href="#">About</a></li>
      <li class="navbar__link"><a href="#">Services</a></li>
      <li class="navbar__link"><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

在这个HTML结构中，.navbar是导航容器，.navbar__body是导航主体，.navbar__brand是品牌名称，.navbar__toggle是导航的开关按钮，.navbar__toggle-icon是开关按钮的图标，.navbar__links是导航链接，.navbar__link是单个导航链接元素。

2. 设置样式

在HTML结构中，.navbar__toggle、.navbar__links和.navbar__toggle-icon最初应该都是隐藏的。只有在视窗超出指定宽度时，导航容器应该显示开关按钮，而导航链接应该被隐藏。

// www.javascriptcn.com code example
.navbar__toggle {
  display: none;
}

@media only screen and (max-width: 768px) {
  .navbar__toggle {
    display: block;
  }
  .navbar__links {
    display: none;
  }
}

.navbar__toggle-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #333;
}

我们使用@media查询来控制响应式导航的行为。当视窗小于768px时，.navbar__toggle应该显示出来。在这个段落的最后，我们将使用JavaScript来为.navbar__toggle添加事件监听器。

此外，我们还设置了.navbar__toggle-icon的样式，用于在.navbar__toggle被激活时更改aria-expanded属性的值，并显示应该出现的内容。

3. 使用Flexbox布局进行排版

我们使用Flexbox布局来实现响应式导航菜单的自适应排版。在.navbar__body元素上设置display:flex即可使其成为Flex容器。

.navbar__body {
  display: flex;
  justify-content: space-between;
}

我们还为.navbar__links设置了flex-basis: 100%，使其占用Flex容器可用空间的全部宽度。

.navbar__links {
  flex-basis: 100%;
}

接下来，我们可以使用flex-grow属性来指定元素在Flex容器中所占的比例，从而实现响应式导航菜单的自适应效果。

// www.javascriptcn.com code example
.navbar__brand {
  flex-grow: 1;
}

.navbar__toggle {
  flex-grow: 2;
}

.navbar__links {
  flex-grow: 1;
}

我们使用.navbar__brand的自适应功能来使品牌名称自适应于导航主体中的其余元素，而.navbar__toggle和.navbar__links分别使用2:1的比例均分主体的可用空间。这使得在导航被缩小到移动设备的屏幕时，主体能够根据需要自适应布局。

4. 交互状态的响应

最后，我们需要为导航添加交互。我们先在JavaScript中实现响应式导航菜单的开关按钮行为。

// www.javascriptcn.com code example
const navbarToggle = document.querySelector('.navbar__toggle');
const navbarLinks = document.querySelector('.navbar__links');
const navbarToggleIcon = document.querySelector('.navbar__toggle-icon');

navbarToggle.addEventListener('click', () => {
  const isExpanded = navbarToggle.getAttribute('aria-expanded') === 'true';
  navbarToggle.setAttribute('aria-expanded', !isExpanded);
  navbarToggleIcon.classList.toggle('is-active');
  navbarLinks.classList.toggle('is-active');
});

使用该脚本，我们在click事件中监听.navbar__toggle元素。在点击事件中，我们切换aria-expanded属性的值，并更新.navbar__toggle-icon和.navbar__links元素的样式。该代码将具有使菜单展开和关闭的响应式行为，使得导航菜单对移动设备更友好。

完整示例代码

下面是我们最终使用Flexbox布局实现的完整响应式导航代码示例。

// www.javascriptcn.com code example
<div class="navbar">
  <div class="navbar__body">
    <div class="navbar__brand">Brand</div>
    <button class="navbar__toggle" aria-expanded="false">
      <span class="navbar__toggle-icon">&nbsp;</span>
    </button>
    <ul class="navbar__links">
      <li class="navbar__link"><a href="#">Home</a></li>
      <li class="navbar__link"><a href="#">About</a></li>
      <li class="navbar__link"><a href="#">Services</a></li>
      <li class="navbar__link"><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

// www.javascriptcn.com code example
.navbar__toggle {
  display: none;
}

@media only screen and (max-width: 768px) {
  .navbar__toggle {
    display: block;
  }
  .navbar__links {
    display: none;
  }
}

.navbar__toggle-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #333;
}

.navbar__body {
  display: flex;
  justify-content: space-between;
}

.navbar__brand {
  flex-grow: 1;
}

.navbar__toggle {
  flex-grow: 2;
}

.navbar__links {
  flex-grow: 1;
  flex-basis: 100%;
}

.navbar__links.is-active {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1em;
  background-color: #f7f7f7;
  z-index: 3;
}

.navbar__link {
  margin: 0.5em;
}

.navbar__toggle-icon.is-active {
  position: relative;
  transform: rotate(45deg);
}

@media only screen and (min-width: 768px) {
  .navbar__links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

// www.javascriptcn.com code example
const navbarToggle = document.querySelector('.navbar__toggle');
const navbarLinks = document.querySelector('.navbar__links');
const navbarToggleIcon = document.querySelector('.navbar__toggle-icon');

navbarToggle.addEventListener('click', () => {
  const isExpanded = navbarToggle.getAttribute('aria-expanded') === 'true';
  navbarToggle.setAttribute('aria-expanded', !isExpanded);
  navbarToggleIcon.classList.toggle('is-active');
  navbarLinks.classList.toggle('is-active');
});

我们使用Flexbox布局、CSS样式和JavaScript脚本，为移动设备和桌面设备提供自适应、简洁和易于使用的响应式导航菜单。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d07a62e46428fe9ed8451c

Flexbox 布局实现响应式导航菜单