当前位置：首页 > CSS

淘宝css导航栏制作

2026-03-31 20:16:39CSS

淘宝CSS导航栏制作

淘宝的导航栏通常包含多个层级，结构复杂但视觉效果简洁。以下是一个简化版的淘宝导航栏CSS实现方法，包含基本结构和样式。

HTML结构

导航栏通常由顶部栏、主导航和子导航组成。以下是一个基础HTML结构：

淘宝css导航栏制作

<div class="nav-container">
  <div class="top-bar">
    <ul class="top-links">
      <li><a href="#">登录</a></li>
      <li><a href="#">注册</a></li>
    </ul>
  </div>
  <div class="main-nav">
    <ul class="nav-list">
      <li><a href="#">首页</a></li>
      <li class="has-submenu">
        <a href="#">商品分类</a>
        <div class="submenu">
          <ul>
            <li><a href="#">女装</a></li>
            <li><a href="#">男装</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

CSS样式

淘宝导航栏的特点是红色主题和悬浮效果。以下是关键CSS样式：

淘宝css导航栏制作

.nav-container {
  width: 100%;
  background-color: #FF0036;
  color: white;
}

.top-bar {
  height: 30px;
  line-height: 30px;
  background-color: #F5F5F5;
  color: #999;
}

.top-links {
  float: right;
}

.top-links li {
  display: inline-block;
  margin-left: 15px;
}

.main-nav {
  height: 60px;
}

.nav-list {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-list > li {
  position: relative;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-list a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.has-submenu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  width: 200px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.has-submenu:hover .submenu {
  display: block;
}

.submenu a {
  color: #333;
  display: block;
  padding: 8px 15px;
}

.submenu a:hover {
  background: #F5F5F5;
}

交互效果

淘宝导航栏的交互效果主要包括悬浮显示子菜单和高亮效果：

.nav-list > li:hover {
  background-color: #CC0030;
}

.has-submenu .submenu li:hover {
  background-color: #F5F5F5;
}

响应式处理

针对不同屏幕尺寸的响应式处理：

@media (max-width: 768px) {
  .nav-list {
    flex-direction: column;
    height: auto;
  }

  .nav-list > li {
    width: 100%;
    padding: 10px;
  }

  .has-submenu .submenu {
    position: static;
    width: 100%;
  }
}