การสร้าง Menu Icon (Hamburger Menu) ด้วย CSS

สร้างไอคอนเมนู 3 แถบ (Hamburger Menu) ด้วย CSS เพียงอย่างเดียว

ตัวอย่างโค้ด

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div {    width: 40px;    height: 7px;    background-color: blue;    margin: 5px 2px; } </style>> </head> <body> <h2>Sample Menu Icon</h2> <div></div> <div></div> <div></div> </body> </html>

คำอธิบาย

ใช้ <div> 3 ตัว กว้าง 40px สูง 7px สีฟ้า ห่างกัน 5px แนวตั้ง 2px แนวนอน สร้างรูปแบบ 3 แถบคลาสสิก

เวอร์ชันปรับปรุง: Single Element ด้วย Pseudo-elements

.hamburger {
  width: 40px;
  height: 7px;
  background: blue;
  position: relative;
}
.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 7px;
  background: blue;
}
.hamburger::before { top: -12px; }
.hamburger::after { bottom: -12px; }

เวอร์ชัน Animated Hamburger (เปลี่ยนเป็น X):

.hamburger {
  width: 40px;
  height: 7px;
  background: blue;
  position: relative;
  transition: background 0.3s;
}
.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 7px;
  background: blue;
  transition: transform 0.3s;
}
.hamburger::before { top: -12px; }
.hamburger::after { bottom: -12px; }

.hamburger.active { background: transparent; }
.hamburger.active::before { transform: rotate(45deg) translate(5px, 6px); }
.hamburger.active::after { transform: rotate(-45deg) translate(5px, -6px); }

Accessibility:

<button class="hamburger" aria-expanded="false" aria-controls="menu" aria-label="Toggle menu">
  <span class="visually-hidden">Toggle menu</span>
</button>