[css] 第254天 如何使用CSS绘制一个汉堡式菜单

[haizhilin2013]

第254天 如何使用CSS绘制一个汉堡式菜单

作者：cxwht

我也要出题

使用CSS绘制一个汉堡式菜单，即选单按钮上的三条平行横线图标

[wheatup]

比较常见的两种方法：

• 利用元素自身、::before和::after伪元素绘制3个长宽一致的矩形，然后设定其y偏移值。
• 利用上下border和自身元素内容绘制：

.burger {
	--width: 20px;
	--thickness: 4px;
	--color: black;
	
	display: inline-block;
	width: var(--width);
	height: var(--thickness);
	background-color: var(--color);
	background-clip: content-box;
	border-top: solid var(--thickness) var(--color);
	border-bottom: solid var(--thickness) var(--color);
	padding-top: var(--thickness);
	padding-bottom: var(--thickness);
}

[forever-z-133]

/* 需要父级设定高度，嘤嘤嘤 */
/* 汉堡式菜单图标，宽高尺寸，线条粗细，线条颜色 */
@mixin menu($size: 50px, $thick: 3px, $color: #000) {
  $_size: $size / 2 - $thick;
  width: $size;
  box-shadow:  0 0 0 $thick $color, 0 -1 * $_size 0 $thick $color,  0 $_size 0 $thick $color;
}
.menu { @include menu(); }

[wheatup]

/* 需要父级设定高度，嘤嘤嘤 */
/* 汉堡式菜单图标，宽高尺寸，线条粗细，线条颜色 */
@mixin menu($size: 50px, $thick: 3px, $color: #000) {
  $_size: $size / 2 - $thick;
  width: $size;
  box-shadow:  0 0 0 $thick $color, 0 -1 * $_size 0 $thick $color,  0 $_size 0 $thick $color;
}
.menu { @include menu(); }

666，利用阴影挺机智的，只是阴影没有点击判定，所以只能通过点击中间的横线才能生效，会有点奇怪。
不过可以手动增加上下padding来扩大点击区域。

[Wyt-GitHub8000]

汉堡式菜单是一种非常流行的响应式导航菜单，可以在移动设备和桌面浏览器上实现便捷的用户导航。下面是使用 CSS 绘制一个汉堡式菜单的基本思路：

HTML 结构：使用

元素作为菜单容器，内部包含三个 元素作为汉堡菜单的条线。

CSS 样式：使用 CSS3 属性实现菜单的展开和收起动画效果，以及条线的旋转和变形效果。

.hamburger-menu {
display: inline-block;
cursor: pointer;
width: 30px;
height: 24px;
position: relative;
}

.hamburger-menu span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #333;
border-radius: 3px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: all 0.25s ease-out;
}

.hamburger-menu span:nth-child(1) {
top: 0;
}

.hamburger-menu span:nth-child(2),
.hamburger-menu span:nth-child(3) {
top: 10px;
}

.hamburger-menu span:nth-child(3) {
top: 20px;
}

.hamburger-menu.active span:nth-child(1) {
top: 10px;
width: 0%;
left: 50%;
}

.hamburger-menu.active span:nth-child(2) {
transform: rotate(45deg);
}

.hamburger-menu.active span:nth-child(3) {
transform: rotate(-45deg);
}
JavaScript 交互：使用 JavaScript 为菜单添加点击事件，通过添加/移除 CSS 类名实现菜单的展开和收起效果。

const menu = document.querySelector('.hamburger-menu');
menu.addEventListener('click', function() {
this.classList.toggle('active');
});
以上就是使用 CSS 绘制一个汉堡式菜单的基本思路，可以根据实际需求和样式定制进行自由发挥和创新。