使用纯 CSS 设计垂直和水平菜单

菜单是网站和应用程序中常见的一个元素。CSS 可以帮助我们轻松地创建不同样式的菜单，包括水平和垂直菜单。在本文中，我们将介绍如何使用纯 CSS 创建水平和垂直菜单。

水平菜单

水平菜单被广泛应用在网页的导航栏中。下面是一个简单的纯 CSS 水平菜单的示例：

.nav {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.nav li {
  margin: 0 10px;
}

.nav a {
  color: #000;
  text-decoration: none;
  padding: 10px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.nav a:hover {
  background-color: #000;
  color: #fff;
}

在这段代码中，我们使用了 CSS flexbox 布局来使水平菜单居中。我们还使用 list-style 属性和 padding 属性去除了列表项点和内边距。然后，我们对菜单项进行了一些基本样式设置，包括间距、颜色和背景转换。

你可以在 <ul class="nav"> 标记中加入菜单项，如下所示：

<ul class="nav">
  <li><a href="#">主页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

垂直菜单

在某些情况下，垂直菜单可能更适合应用程序布局。下面是一个简单的纯 CSS 垂直菜单的示例：

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li {
  margin-bottom: 5px;
}

.nav a {
  display: block;
  padding: 10px;
  color: #000;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.nav a:hover {
  background-color: #000;
  color: #fff;
}

在这段代码中，我们仍然使用 list-style 和 padding 属性去除了列表项点和内边距。我们还为每个菜单项添加了 margin-bottom 属性以制造间隔。然后我们对菜单项进行了一些基本样式设置，包括颜色、背景转换和边框半径。

你可以在 <ul class="nav"> 标记中加入菜单项，如下所示：

<ul class="nav">
  <li><a href="#">主页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

结论

在本文中，我们介绍了使用纯 CSS 创建水平和垂直菜单的示例。虽然这只是一些基本设置，但你可以根据你的需求进一步优化这些菜单。CSS 代码片段可以轻松地集成到任何网站或应用程序中，快速创建优美的菜单。