当前位置：首页 > CSS

css div 制作导航菜单

2026-01-14 12:08:16CSS

使用 CSS 和 Div 制作导航菜单

导航菜单是网站的重要组成部分，以下是通过 CSS 和 div 元素制作导航菜单的方法。

基本 HTML 结构

创建一个简单的 div 结构作为导航菜单的基础：

<div class="nav-menu">
  <div class="nav-item">首页</div>
  <div class="nav-item">产品</div>
  <div class="nav-item">服务</div>
  <div class="nav-item">关于我们</div>
  <div class="nav-item">联系我们</div>
</div>

基础 CSS 样式

为导航菜单添加基本样式，使其水平排列并具有交互效果：

.nav-menu {
  display: flex;
  background-color: #333;
  padding: 10px;
  border-radius: 5px;
}

.nav-item {
  color: white;
  padding: 10px 20px;
  margin: 0 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.nav-item:hover {
  background-color: #555;
  border-radius: 3px;
}

响应式设计

通过媒体查询使导航菜单在移动设备上垂直排列：

@media (max-width: 600px) {
  .nav-menu {
    flex-direction: column;
  }

  .nav-item {
    margin: 5px 0;
  }
}

添加活动状态

为当前选中的菜单项添加高亮样式：

.nav-item.active {
  background-color: #4CAF50;
  font-weight: bold;
}

下拉菜单实现

如果需要二级菜单，可以扩展 HTML 和 CSS：

<div class="nav-menu">
  <div class="nav-item">首页</div>
  <div class="nav-item dropdown">
    产品
    <div class="dropdown-content">
      <div>产品1</div>
      <div>产品2</div>
      <div>产品3</div>
    </div>
  </div>
  <!-- 其他菜单项 -->
</div>

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content div {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content div:hover {
  background-color: #ddd;
}

动画效果增强

为菜单项添加更丰富的动画效果：

css div 制作导航菜单

.nav-item {
  position: relative;
  overflow: hidden;
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #4CAF50;
  transition: width 0.3s;
}

.nav-item:hover::after {
  width: 100%;
}

这些方法提供了从基础到高级的导航菜单实现方案，可以根据具体需求进行调整和扩展。