css导航栏三横杠图标

CSS导航栏中常见的三横杠图标，通常也称为汉堡菜单图标。它是一种简洁而常用的导航栏展开/折叠按钮，可以让网站看起来更加美观，也可以提高用户体验和可用性。

/* 汉堡菜单样式 */
.ham {
  display: block;
  height: 16px;
  width: 24px;
  position: relative;
  cursor: pointer;
}

/* 菜单按钮样式 */
.ham div {
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #333;
  border-radius: 2px;
  transition: transform 0.3s ease-out;
}

/* 收起状态样式 */
.ham .top {
  top: 0;
}

.ham .middle {
  top: 7px;
}

.ham .bottom {
  top: 14px;
}

/* 展开状态样式 */
.ham.expend .top {
  transform: rotate(45deg) translate(5px,5px);
}

.ham.expend .middle {
  opacity: 0;
}

.ham.expend .bottom {
  transform: rotate(-45deg) translate(5px,-5px);
}

如上述代码所示，我们先定义了一个名为.ham的CSS类，该类表示一个三横杠菜单按钮。接下来，我们定义了它的子元素样式，即三个div元素，分别表示汉堡菜单中的三根线，通过绝对定位来确定它们的位置。我们还为三个div元素定义了一些简单的过渡动画效果，使得汉堡菜单菜单可以具有更加平滑的展开/折叠效果。

最后，我们通过JavaScript代码来添加事件监听器，当用户点击汉堡菜单按钮时，我们将触发类名为.expend的CSS类的添加/删除，从而切换汉堡菜单的展开和折叠状态。

总的来说，在网页设计中使用汉堡菜单可以使得网站功能更为清晰，布局更加紧凑，对于移动设备用户而言，也可以节约屏幕空间，提高用户体验。