Material Design 中的顶部导航栏动态图标切换实现教程-JavaScript中文网-JavaScript教程资源分享门户

在 Material Design 中，顶部导航栏是一个非常重要的组件。为了提高用户体验，我们常常需要在导航栏中添加动态图标切换功能。在本文中，我们将介绍如何使用 HTML、CSS 和 JavaScript 实现这一功能。

实现步骤

第一步：HTML 结构

我们需要在 HTML 中定义导航栏的结构。一般来说，导航栏包含一个 logo、若干个菜单项和一个搜索框。以下是一个典型的导航栏结构：

<nav>
  <div class="logo">Logo</div>
  <ul class="menu">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
  <div class="search">
    <input type="text" placeholder="搜索">
    <button>搜索</button>
  </div>
</nav>

第二步：CSS 样式

我们需要为导航栏添加一些 CSS 样式，使其具有 Material Design 风格。以下是一个简单的样式示例：

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #2196F3;
  color: #fff;
  height: 64px;
  padding: 0 24px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

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

.menu li {
  margin-left: 16px;
}

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

.menu a {
  color: #fff;
  text-decoration: none;
}

.search {
  display: flex;
  align-items: center;
}

.search input[type="text"] {
  border: none;
  border-bottom: 1px solid #fff;
  background-color: transparent;
  color: #fff;
  font-size: 16px;
  padding: 8px;
  margin-right: 16px;
}

.search button {
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

第三步：JavaScript 代码

我们需要使用 JavaScript 代码来实现动态图标切换功能。具体来说，当用户点击某个菜单项时，我们需要将该菜单项的图标切换成另一个图标。以下是一个简单的 JavaScript 示例：

const menuItems = document.querySelectorAll('.menu li');
menuItems.forEach(item => {
  item.addEventListener('click', () => {
    // 切换图标
    const icon = item.querySelector('i');
    if (icon.classList.contains('fa-bars')) {
      icon.classList.remove('fa-bars');
      icon.classList.add('fa-times');
    } else {
      icon.classList.remove('fa-times');
      icon.classList.add('fa-bars');
    }
  });
});

在上述代码中，我们首先使用 querySelectorAll 方法获取所有菜单项，然后为每个菜单项添加一个点击事件处理函数。在事件处理函数中，我们使用 querySelector 方法获取菜单项中的图标元素，并根据当前图标的状态切换成另一个图标。

第四步：完整示例代码

以下是一个完整的示例代码，包含 HTML、CSS 和 JavaScript 代码：

<!DOCTYPE html>
<html>
<head>
  <title>Material Design 导航栏</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <style>
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #2196F3;
      color: #fff;
      height: 64px;
      padding: 0 24px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
    }

    .logo {
      font-size: 24px;
      font-weight: bold;
    }

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

    .menu li {
      margin-left: 16px;
    }

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

    .menu a {
      color: #fff;
      text-decoration: none;
    }

    .search {
      display: flex;
      align-items: center;
    }

    .search input[type="text"] {
      border: none;
      border-bottom: 1px solid #fff;
      background-color: transparent;
      color: #fff;
      font-size: 16px;
      padding: 8px;
      margin-right: 16px;
    }

    .search button {
      border: none;
      background-color: transparent;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <nav>
    <div class="logo">Logo</div>
    <ul class="menu">
      <li><a href="#"><i class="fas fa-bars"></i> 菜单项1</a></li>
      <li><a href="#"><i class="fas fa-bars"></i> 菜单项2</a></li>
      <li><a href="#"><i class="fas fa-bars"></i> 菜单项3</a></li>
    </ul>
    <div class="search">
      <input type="text" placeholder="搜索">
      <button>搜索</button>
    </div>
  </nav>

  <script>
    const menuItems = document.querySelectorAll('.menu li');
    menuItems.forEach(item => {
      item.addEventListener('click', () => {
        // 切换图标
        const icon = item.querySelector('i');
        if (icon.classList.contains('fa-bars')) {
          icon.classList.remove('fa-bars');
          icon.classList.add('fa-times');
        } else {
          icon.classList.remove('fa-times');
          icon.classList.add('fa-bars');
        }
      });
    });
  </script>
</body>
</html>

总结

本文介绍了如何使用 HTML、CSS 和 JavaScript 实现 Material Design 风格的顶部导航栏，并添加了动态图标切换功能。通过本文的学习，读者可以了解到如何使用 HTML、CSS 和 JavaScript 实现 Web 前端开发中常见的功能，具有一定的指导意义。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658d23c1eb4cecbf2d314ca1