解决响应式设计下头部搜索栏方案分享-JavaScript中文网-JavaScript教程资源分享门户

现代网站的设计趋势中，响应式设计已经成为必备技能。随着移动设备的普及和网站访问的多样化，我们需要保证网站在不同屏幕尺寸和设备上都能够良好地展现和使用。而头部搜索栏是一个非常重要的组件，因为它通常是用户能够快速找到信息的入口。在本文中，我们将分享一些解决响应式设计下头部搜索栏的方案。

方案一：隐藏搜索框

在移动设备上，由于屏幕尺寸有限，我们需要将搜索框隐藏起来，只在用户需要时展现。这可以通过在页面上添加一个搜索按钮来实现，当用户点击按钮时，搜索框会出现。

<div class="search-container">
  <button class="search-btn"></button>
  <form class="search-form">
    <input type="text" placeholder="Search...">
    <button type="submit">Go</button>
  </form>
</div>

.search-container {
  position: relative;
}
.search-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-image: url(search-icon.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.search-form {
  display: none;
  position: absolute;
  top: 40px;
  right: 0;
  width: 100%;
}
.search-form input[type="text"] {
  width: 100%;
}

通过设置搜索框的 display 属性为 none，我们可以将搜索框默认隐藏起来。当用户点击搜索按钮时，我们可以通过 JavaScript 来控制搜索框的显示与隐藏。

const searchBtn = document.querySelector('.search-btn');
const searchForm = document.querySelector('.search-form');

searchBtn.addEventListener('click', () => {
  searchForm.style.display = 'block';
});

这种方案的优点是可以将页面上的元素数量降低，减小页面加载时间。但是缺点是用户需要进行额外的操作才能展现搜索框，可能会影响用户体验。

方案二：固定搜索框

在桌面设备上，我们可以将搜索框固定在页面的顶部或者导航栏中，让用户随时可以访问。

<nav class="navbar">
  <div class="container">
    <a href="#" class="logo">Logo</a>
    <form class="search-form">
      <input type="text" placeholder="Search...">
      <button type="submit">Go</button>
    </form>
  </div>
</nav>

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  z-index: 10;
}
.container {
  display: flex;
  align-items: center;
  height: 100%;
}
.logo {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-right: 20px;
}
.search-form {
  flex: 1;
  margin-right: 20px;
}
.search-form input[type="text"] {
  width: 100%;
  height: 40px;
  padding: 10px;
  border: none;
  border-radius: 20px;
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}
.search-form button[type="submit"] {
  width: 60px;
  height: 40px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 20px;
  outline: none;
  cursor: pointer;
}

通过将搜索框的容器设置为固定定位，并设置合适的样式，我们可以让搜索框始终保持在页面的顶部或导航栏中。这种方案的优点是可以让用户随时访问搜索框，提高了用户的使用体验。但是在移动设备上，搜索框可能会占据过多的空间，影响页面的可视区域。

方案三：使用搜索图标

在移动设备上，我们可以使用搜索图标来代替搜索框。这可以通过在页面上添加一个搜索按钮和一个遮罩层来实现。当用户点击搜索按钮时，遮罩层会展现并在上面显示搜索框。

<div class="search-container">
  <button class="search-btn"></button>
  <div class="search-overlay">
    <form class="search-form">
      <input type="text" placeholder="Search...">
      <button type="submit">Go</button>
    </form>
  </div>
</div>

.search-container {
  position: relative;
}
.search-btn {
  width: 40px;
  height: 40px;
  background-image: url(search-icon.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.search-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  z-index: 10;
}
.search-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 400px;
  padding: 20px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}
.search-form input[type="text"] {
  width: 100%;
  height: 40px;
  padding: 10px;
  border: none;
  border-radius: 20px;
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}
.search-form button[type="submit"] {
  width: 60px;
  height: 40px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 20px;
  outline: none;
  cursor: pointer;
}

通过设置遮罩层的 display 属性为 none，我们可以将搜索框默认隐藏起来。当用户点击搜索按钮时，我们可以通过 JavaScript 来控制遮罩层和搜索框的显示与隐藏。

const searchBtn = document.querySelector('.search-btn');
const searchOverlay = document.querySelector('.search-overlay');
const searchForm = document.querySelector('.search-form');

searchBtn.addEventListener('click', () => {
  searchOverlay.style.display = 'block';
  searchForm.style.display = 'block';
});

searchOverlay.addEventListener('click', () => {
  searchOverlay.style.display = 'none';
  searchForm.style.display = 'none';
});

这种方案的优点是可以将搜索框的展现方式变得更加直观和易于操作。但是缺点是需要使用 JavaScript 来实现，增加了页面的复杂度。

总结

以上是几种解决响应式设计下头部搜索栏的方案。不同的方案适用于不同的情况，我们需要根据具体的项目需求来选择合适的方案。同时，我们还应该关注用户的使用体验，尽可能地减少用户在搜索时的操作次数，提高用户的使用效率。

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