CSS와 JavaScript로 햄버거 버튼 만들기

HTML 부분 코드

<div class="hamburger" id="hamburger">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

<nav class="menu" id="menu">
  <ul>
    <li><a href="#">홈</a></li>
    <li><a href="#">서비스</a></li>
    <li><a href="#">포트폴리오</a></li>
    <li><a href="#">문의하기</a></li>
  </ul>
</nav>

CSS 부분 코드

body {
  margin: 0;
  font-family: sans-serif;
  background: #ffffff;
}

.hamburger {
  position: relative;
  top: 20px;
  left: 20px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  z-index: 1001;
}

.bar {
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: #000;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

.bar:nth-child(1) {
  top: 0;
}

.bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.bar:nth-child(3) {
  top: calc(100% - 2px);
}

/* Active 상태일 때 */
.hamburger.active .bar:nth-child(1) {
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
}

.hamburger.active .bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
  top: 50%;
  transform: rotate(-45deg) translateY(-50%);
}

/* Menu styles */
.menu {
  display: none;
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  background-color: #f4f4f4;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.menu.active {
  display: block;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  margin: 10px 0;
}

.menu a {
  text-decoration: none;
  color: #333;
}

Javascript 부분 코드

const hamburger = document.getElementById("hamburger");
const menu = document.getElementById("menu");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("active");
  menu.classList.toggle("active");
});