4.3 打造现代导航菜单

现代导航菜单是任何网站设计的重要组成部分，尤其是在响应式设计和移动端友好的网站中。CSS 和 JavaScript 为实现灵活且高效的导航菜单提供了丰富的手段。在本节中，我们将讨论如何使用现代 CSS 技术创建各种类型的导航菜单，包括水平菜单、垂直菜单、下拉菜单以及响应式导航菜单。

1. 水平导航菜单

水平导航菜单是最常见的导航类型，它通常显示在页面的顶部，并水平排列各个导航项。要实现一个基本的水平导航菜单，我们可以使用 display: inline-block 或 display: flex 来布局。

1.1 使用 `display: flex` 实现水平菜单

flexbox 是实现灵活布局的理想选择，能简化项目的排列和对齐问题。

示例代码：

<nav>
  <ul class="nav">
    <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>
</nav>

<style>
  /* 清除默认的 list 样式 */
  .nav {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
  }

  .nav li {
    margin-right: 20px;
  }

  .nav a {
    text-decoration: none;
    color: #333;
    padding: 10px 15px;
    display: block;
  }

  .nav a:hover {
    background-color: #ddd;
  }
</style>

解析：

使用 display: flex 让 <ul> 元素中的 <li> 元素按水平排列。
每个 <a> 标签添加了填充和悬停效果，以改善用户体验。

1.2 自适应的水平菜单

通过 flexbox 和媒体查询，可以轻松创建响应式的水平菜单，确保它在不同设备下都能良好显示。

示例代码：

<nav>
  <ul class="nav">
    <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>
</nav>

<style>
  .nav {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
    background-color: #333;
  }

  .nav li {
    margin-right: 20px;
  }

  .nav a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    display: block;
  }

  .nav a:hover {
    background-color: #555;
  }

  /* 响应式：当屏幕宽度小于 600px 时，菜单改为垂直排列 */
  @media (max-width: 600px) {
    .nav {
      flex-direction: column;
    }

    .nav li {
      margin-right: 0;
      margin-bottom: 10px;
    }
  }
</style>

解析：

默认情况下，菜单是水平排列的。
当视口宽度小于 600px 时，通过媒体查询修改布局，将菜单项改为垂直排列。

2. 下拉菜单

下拉菜单通常用于在导航栏中创建子菜单，这样可以节省空间，同时提供更多选项。可以通过 CSS 的 :hover 伪类或者使用 JavaScript 来控制下拉菜单的显示和隐藏。

2.1 使用 CSS 实现下拉菜单

通过简单的 CSS 伪类 :hover，可以在悬停时显示子菜单。

示例代码：

<nav>
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="dropdown">
      <a href="#">Services</a>
      <ul class="dropdown-menu">
        <li><a href="#">Web Design</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">Hosting</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<style>
  .nav {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    background-color: #333;
  }

  .nav li {
    position: relative;
  }

  .nav a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    display: block;
  }

  .nav a:hover {
    background-color: #555;
  }

  /* 下拉菜单 */
  .dropdown-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    background-color: #444;
  }

  .dropdown:hover .dropdown-menu {
    display: block;
  }

  .dropdown-menu li a {
    padding: 10px 15px;
    color: white;
  }

  .dropdown-menu li a:hover {
    background-color: #555;
  }
</style>

解析：

.dropdown 元素包含一个子菜单 <ul>，并使用 position: absolute 将下拉菜单定位到其父元素的下方。
通过 :hover 伪类触发菜单的显示。

2.2 使用 JavaScript 控制下拉菜单

如果你需要更复杂的交互，比如点击事件触发下拉菜单，可以使用 JavaScript 来控制显示和隐藏。

示例代码：

<nav>
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle">Services</a>
      <ul class="dropdown-menu">
        <li><a href="#">Web Design</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">Hosting</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<script>
  document.querySelectorAll('.dropdown-toggle').forEach(item => {
    item.addEventListener('click', (e) => {
      e.preventDefault();
      let menu = item.nextElementSibling;
      menu.style.display = (menu.style.display === 'block') ? 'none' : 'block';
    });
  });
</script>

<style>
  .nav {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    background-color: #333;
  }

  .nav li {
    position: relative;
  }

  .nav a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    display: block;
  }

  .nav a:hover {
    background-color: #555;
  }

  .dropdown-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    background-color: #444;
  }

  .dropdown-menu li a {
    padding: 10px 15px;
    color: white;
  }

  .dropdown-menu li a:hover {
    background-color: #555;
  }
</style>

解析：

通过 JavaScript 监听 .dropdown-toggle 的点击事件，来切换 .dropdown-menu 的显示状态。
初始状态下，子菜单隐藏，通过点击触发显示。

3. 响应式导航菜单

响应式设计要求在不同的设备上适配不同的布局。对于导航菜单，常见的做法是将水平菜单在小屏设备上转换为汉堡菜单，以节省空间并提供良好的用户体验。

3.1 使用媒体查询和 JavaScript 创建汉堡菜单

在小屏设备上，通常使用一个按钮（汉堡图标）来控制菜单的显示和隐藏。

示例代码：

<nav>
  <button class="hamburger" aria-label="Toggle Navigation">☰</button>
  <ul class="nav">
    <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>
</nav>

<script>
  document.querySelector('.hamburger').addEventListener('click', () => {
    const nav = document.querySelector('.nav');
    nav.classList.toggle('open');
  });
</script>

<style>
  .nav {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    background-color: #333;
  }

  .nav li {
    margin-right: 20px;
  }

  .nav a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    display: block;
  }

  .nav a:hover {
    background-color: #555;
  }

  .hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 30px;
    color: white;
    padding: 10px;
  }

  /* 响应式设计：当屏幕宽度小于 600px 时，隐藏水平菜单并显示汉堡按钮 */
  @media (max-width: 600px) {
    .nav {
      display: none;
      flex-direction: column;
    }

    .nav.open {
      display: flex;
    }

    .hamburger {
      display: block;
    }
  }
</style>

解析：

在小屏设备上，菜单默认隐藏，通过点击汉堡按钮切换菜单的显示状态。
使用 display: none 和 display: flex 控制菜单的显示与隐藏。

4. 总结

水平菜单：通过 flexbox 实现，支持自适应布局。
下拉菜单：可以通过 :hover 或 JavaScript 来实现，支持复杂的交互效果。
响应式菜单：使用媒体查询和 JavaScript 实现汉堡菜单，确保菜单在移动端的良好显示。

通过掌握这些技巧，您可以为网站提供灵活、现代的导航体验，满足不同设备和屏幕尺寸的需求。

#前端开发分享于 2025-03-11

上一篇：4.2 深入理解 CSS 继承和优先级下一篇：4.4 CSS 自定义滚动条

4.3 打造现代导航菜单