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

简介

本文将介绍如何利用css和javascript技术实现一个带有动画效果的搜索框，应用在导航栏中，可以根据用户输入的关键词实时筛选出相关内容。

技术实现

HTML

首先，在html中设置好导航栏的结构，包括导航栏的logo、导航选项和搜索框等元素。其中，搜索框分为输入框和搜索按钮两部分。

<nav>
  <div class="logo">My Logo</div>
    
  <ul class="nav-items">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>

  <form action="#" class="search-form">
    <input type="text" class="search-input" placeholder="Search">
    <button type="submit" class="search-button">Go</button>
  </form>
</nav>

CSS

接下来，用css来实现导航栏的样式和动画效果。首先，设置导航栏的基本样式，包括背景颜色、字体大小、边距等。

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

接下来，设置logo和导航选项的样式，包括字体大小、颜色等。

.logo { 
  font-size: 24px;
  font-weight: bold;
}
 
.nav-items li {
  display: inline-block;
  margin-right: 20px;
}

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

然后，设置搜索框的样式。输入框设置为灰色背景，白色边框，字体居中；搜索按钮设置为蓝色背景，白色字体，边框圆角。

.search-input {
  background-color: #ddd;
  border: none;
  padding: 6px 10px;
  font-size: 16px;
  width: 200px;
  border-radius: 5px;
  color: #333;
}

.search-button {
  background-color: #007bff;
  border: none;
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
}

最后，设置搜索框的动画效果。当鼠标移动到搜索框上时，搜索框的宽度会从200px逐渐变成300px，同时，输入框的背景颜色也会从灰色变成白色。

.search-form {
  position: relative;
}

.search-input:focus {
  background-color: #fff;
}

.search-input:focus + .search-button {
  background-color: #0066cc;
}

.search-input {
  transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.search-input:focus {
  width: 300px;
}

JavaScript

最后，利用javascript实现搜索框的功能。当用户在输入框中输入关键词时，根据关键词实时筛选出相关内容，并将结果展示在页面中。

const searchBox = document.querySelector('.search-input');
const searchForm = document.querySelector('.search-form');

searchForm.addEventListener('submit', function (event) {
  event.preventDefault();
  const keywords = searchBox.value;
  // 进行搜索操作
});

searchBox.addEventListener('keyup', function () {
  const keywords = searchBox.value;
  // 根据关键词实时筛选内容并展示结果
});

这样，一个带有动画搜索框的导航栏就完成了！

总结

通过本文的介绍，我们了解了如何利用css和javascript技术实现一个带有动画效果的搜索框，并将其应用在导航栏中，方便用户快速搜索相关内容。希望本文可以帮助到广大程序员！