햄버거 메뉴 Hamburger menu

<header class="bar">
  <b>Logo</b>
  <button class="burger" aria-label="메뉴" onclick="this.classList.toggle('open');document.querySelector('.menu').classList.toggle('show')"><span></span><span></span><span></span></button>
</header>
<nav class="menu"><a>제품</a><a>가격</a><a>문의</a></nav>
<style>
body{padding:0}
.bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)}
.burger{width:36px;height:36px;border:0;background:none;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:6px;cursor:pointer}
.burger span{height:2px;background:var(--fg);border-radius:2px;transition:.2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{display:none;flex-direction:column;padding:8px 16px;background:var(--surface)}
.menu.show{display:flex}
.menu a{padding:10px 0;border-bottom:1px solid var(--border)}
</style>

언제 쓰나

화면이 좁은 모바일에서 메뉴를 공간 차지 없이 넣을 때.

비슷한 것과 차이

• 햄버거는 버튼(아이콘) 이름이고, 눌렀을 때 나오는 패널은 드롭다운 메뉴이거나 드로어
• 요청 시 “햄버거 버튼 누르면 왼쪽에서 드로어가 나오게”처럼 둘을 함께 적으면 정확