[分享]css做菜单三个横杠

CSS做菜单三个横杠是现代网页设计中常见的一种菜单样式，其具有简洁美观、易于使用等特点，让网页的用户界面更加友好。.navbar { display: flex; justifycontent: sp...

CSS做菜单三个横杠是现代网页设计中常见的一种菜单样式，其具有简洁美观、易于使用等特点，让网页的用户界面更加友好。

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 10px;
}

.menu {
  display: none;
  flex-direction: column;
  list-style: none;
  position: absolute;
  top: 50px;
  right: 10px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
  z-index: 10;
}

.navbar__menu {
  position: relative;
}

.navbar__menu--icon {
  font-size: 20px;
  cursor: pointer;
  color: #000;
}

.navbar__menu--icon::before,
.navbar__menu--icon::after {
  content: ';
  display: block;
  height: 2px;
  width: 20px;
  background-color: #000;
  margin: 4px 0;
}

.navbar__menu--icon::before {
  transform: translateY(-6px);
}

.navbar__menu--icon::after {
  transform: translateY(4px);
}

@media (max-width: 768px) {
  .menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
} 

通过以上代码，我们可以实现一个导航栏，其中包含一个菜单按钮，当点击菜单按钮时，弹出一个包含菜单选项的弹出框（菜单列表），在响应式情况下，弹出框会覆盖整个屏幕。

在正常情况下，菜单按钮显示为三条横杠，在悬停或点击时，横杠会变色。横杠通过:before和:after伪元素实现。当菜单列表弹出时，菜单按钮横杠会变成叉号。

CSS做菜单三个横杠技术已经成熟，是我们进行网页设计和开发时必备的技能，希望大家可以掌握这一技能，创造出更美观、更易用的网页。