设计带有动画搜索框的导航栏

介绍

在这个教程中，我们将学习如何设计一个动态搜索框的导航栏。这个导航栏将会具有以下功能：

• 固定在顶部，并且在滚动页面时保持可见
• 包含一个搜索框
• 搜索框将包含一个动画，以便在用户点击后打开和关闭
• 当搜索框处于打开状态时，其他元素将向下移动

我们将使用 HTML、CSS 和 JavaScript 来实现这些功能。

步骤

1. 创建 HTML 模板

首先，我们需要创建 HTML 模板。我们将使用一个简单的 header 元素来创建导航栏。我们使用了一个 div 元素来包含搜索框。代码如下：

<header>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>
        <div class="search-container">
          <input type="text" placeholder="Search">
          <button type="submit">Search</button>
        </div>
      </li>
    </ul>
  </nav>
</header>

2. 样式导航栏

现在，我们需要对 HTML 元素进行样式设置，使其看起来更加美观且具有动画效果。代码如下：

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #333;
  color: #fff;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0 10px;
}

.search-container {
  position: relative;
}

.search-container input[type="text"] {
  padding: 5px 30px 5px 15px;
  border: none;
  border-radius: 25px;
  background-color: #555;
  color: #fff;
  width: 0;
  transition: width 0.4s ease-in-out;
}

.search-container input[type="text"]:focus {
  width: 100%;
}

.search-container button {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px 15px;
  background-color: #777;
  border: none;
  border-radius: 0 25px 25px 0;
  color: #fff;
  cursor: pointer;
}

3. 添加 JavaScript 动画

最后，我们需要使用 JavaScript 来添加一个动画效果，当用户点击搜索框时，它会向右扩展。代码如下：

const searchInput = document.querySelector(".search-container input");
const searchButton = document.querySelector(".search-container button");

searchButton.addEventListener("click", () => {
  searchInput.focus();
});

searchInput.addEventListener("focus", () => {
  searchInput.style.width = "100%";
});

searchInput.addEventListener("blur", () => {
  searchInput.style.width = "0";
});

结论

现在，我们已经成功地创建了一个动态搜索框的导航栏。我们使用了 HTML、CSS 和 JavaScript 来完成这一目标。我们创建了一个简单的 HTML 模板，并对其进行样式设置。最后，我们添加了一个 JavaScript 动画，使搜索框看起来更加具有吸引力。