当前位置：首页 > CSS

css制作导航搜索

2026-03-12 11:47:12CSS

基础导航栏结构

使用HTML的<nav>标签包裹导航内容，内部通常采用无序列表<ul>和列表项<li>结构。搜索框可通过<input>和<button>组合实现：

<nav class="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
  </ul>
  <div class="search-box">
    <input type="text" placeholder="搜索...">
    <button>搜索</button>
  </div>
</nav>

横向布局样式

通过Flexbox实现水平排列，设置导航项间距和对齐方式：

css制作导航搜索

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #333;
}

.navbar ul {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.navbar a {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
}

搜索框美化

为输入框和按钮添加过渡效果与悬停样式：

css制作导航搜索

.search-box input {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.search-box button {
  padding: 0.5rem 1rem;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background 0.3s;
}

.search-box button:hover {
  background-color: #45a049;
}

响应式处理

添加媒体查询适应移动端，折叠导航项并调整搜索框宽度：

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    gap: 1rem;
  }

  .navbar ul {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  .search-box {
    width: 100%;
  }

  .search-box input {
    width: 70%;
  }
}

下拉搜索建议

结合JavaScript实现动态搜索建议列表，通过绝对定位显示结果：

.search-suggestions {
  position: absolute;
  background: white;
  width: calc(70% + 60px);
  border: 1px solid #ddd;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
}

.search-suggestions li {
  padding: 8px;
  cursor: pointer;
}

.search-suggestions li:hover {
  background-color: #f1f1f1;
}

标签: css