css 制作横向菜单

使用 Flexbox 制作横向菜单

Flexbox 是制作横向菜单最便捷的方式之一。通过设置 display: flex 可以让子元素水平排列。

.menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  margin-right: 20px;
}

.menu li:last-child {
  margin-right: 0;
}

HTML 结构：

<ul class="menu">
  <li>首页</li>
  <li>产品</li>
  <li>关于</li>
  <li>联系我们</li>
</ul>

使用 Inline-Block 实现横向菜单

另一种传统方法是使用 display: inline-block，需要注意消除元素间的空白间隙。

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0; /* 消除空白间隙 */
}

.menu li {
  display: inline-block;
  font-size: 16px; /* 恢复字体大小 */
  margin-right: 20px;
}

使用 Grid 布局创建横向菜单

CSS Grid 也可以用来创建横向菜单，适合更复杂的布局需求。

.menu {
  display: grid;
  grid-auto-flow: column;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 20px;
}

添加悬停效果

为菜单项添加交互效果可以提升用户体验。

.menu li {
  transition: color 0.3s ease;
}

.menu li:hover {
  color: #007bff;
  cursor: pointer;
}

响应式设计考虑

在小屏幕设备上，可能需要将横向菜单转换为纵向菜单。

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

  .menu li {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

添加分隔线

在菜单项之间添加视觉分隔线。

.menu li:not(:last-child)::after {
  content: "|";
  margin-left: 20px;
  color: #ccc;
}

这些方法提供了从简单到高级的横向菜单实现方案，可以根据项目需求选择最适合的方式。Flexbox 方案因其简洁性和灵活性成为现代前端开发的首选。