基础 CSS 响应式导航切换

在现代 web 开发中，响应式设计已成为必要的技能之一。一个重要的方面是设计和实现一个可响应的导航菜单。本文将介绍如何使用 CSS 和 JavaScript 实现一个基础的响应式导航切换菜单。

HTML 结构

在 HTML 中，我们需要用到一个顶层容器元素，通常是 <nav>，其中包含导航链接和一个“切换”按钮。我们将使用一个无序列表 <ul> 来实现链接。同时，我们还需要一个“切换”按钮，当屏幕宽度较小时会显示出来。

以下是 HTML 结构的示例：

<nav class="navbar">
  <a href="#" class="nav-logo">Logo</a>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <button class="nav-toggle">
    <span class="bars"></span>
  </button>
</nav>

CSS 样式

我们需要使用 CSS 来控制导航菜单的样式和布局。以下是 CSS 样式的示例：

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #333;
  color: #fff;
}

.nav-logo {
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 30px;
}

.nav-links li:first-child {
  margin-left: 0;
}

.nav-links a {
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}

.nav-toggle {
  display: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.bars {
  display: block;
  width: 30px;
  height: 4px;
  background-color: #fff;
  margin-top: 6px;
}

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    display: none;
    width: 100%;
    margin-top: 10px;
    text-align: center;
  }

  .nav-links li {
    margin: 0;
  }

  .nav-toggle {
    display: block;
  }
}

JavaScript 动态效果

我们需要使用 JavaScript 来实现切换按钮的动态效果。以下是 JavaScript 的示例：

const navToggle = document.querySelector(".nav-toggle");
const navLinks = document.querySelector(".nav-links");

navToggle.addEventListener("click", () => {
  navLinks.classList.toggle("active");
});

以上代码将为切换按钮添加一个单击事件，该事件将在导航菜单上切换 .active 类。我们需要在 CSS 中添加 .active 类的样式来控制导航菜单的显示和隐藏。

总结

本文介绍了如何使用 HTML、CSS 和 JavaScript 来实现一个响应式导航菜单。您可以根据您的需要修改样式和布局，使它与您的网站或应用程序的视觉风格相匹配。

以上是本文的内容，其中包含 HTML、CSS 和 JavaScript 的示例代码，希望对您有所帮助！