JavaScript로 반응형 네비게이션 메뉴 구현하기｜햄버거 메뉴 완벽 가이드

글쓴이 /

반응형 웹에서 네비게이션 메뉴는 작은 화면에서도 쉽게 접근할 수 있어야 합니다.
이 글에서는 JavaScript를 활용해 햄버거 메뉴를 구현하는 방법을 단계별로 설명합니다.
모바일·태블릿·데스크톱까지 유연하게 대응하는 반응형 메뉴 제작 실습을 통해 실무에서 바로 활용 가능한 팁을 배워보세요.

반응형 메뉴가 필요한 이유

  • 모바일 사용자 증가 → 화면 공간이 제한적이므로 숨김 메뉴 필수
  • 접근성 향상 → 작은 화면에서도 손쉽게 탐색 가능
  • UI 일관성 → 하나의 코드로 모든 해상도에서 동일한 UX 제공 가능

💡 Tip: 반응형 메뉴는 햄버거 버튼 + 숨겨진 메뉴 구조가 가장 일반적이며, 간결하고 직관적입니다.

기본 HTML 구조

<nav class="navbar">
  <div class="logo">MySite</div>
  <button class="menu-toggle" aria-label="메뉴 열기">☰</button>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
HTML
  • .menu-toggle → 햄버거 버튼 역할
  • .nav-links → 숨겨졌다가 나타나는 네비게이션 메뉴

CSS 스타일링

/* 기본 레이아웃 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #333;
  color: #fff;
}

.nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
}

/* 모바일 초기 상태 */
.menu-toggle {
  display: none;
  font-size: 24px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    flex-direction: column;
    background: #444;
    display: none;
    padding: 10px 0;
  }

  .nav-links.show {
    display: flex;
  }
}
CSS

📝 설명:

  • 데스크톱 화면 → 메뉴 항상 보임 (flex)
  • 모바일 화면 → 메뉴 기본 display: none
  • .show 클래스 추가 시 메뉴가 나타남

JavaScript로 메뉴 토글 구현

const toggleBtn = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');

toggleBtn.addEventListener('click', () => {
  navLinks.classList.toggle('show');
});
JavaScript

📱 RAO 팁: classList.toggle()을 사용하면 코드가 간결해지고 유지보수가 쉬워집니다.

접근성 향상 (A11y)

toggleBtn.addEventListener('click', () => {
  const expanded = toggleBtn.getAttribute('aria-expanded') === 'true';
  toggleBtn.setAttribute('aria-expanded', !expanded);
  navLinks.classList.toggle('show');
});
JavaScript
  • aria-expanded 속성을 업데이트하여 스크린 리더가 메뉴 상태를 인식 가능하게 만듦.

💡 실무 팁: 접근성을 고려한 ARIA 속성 추가는 SEO와 사용자 경험 모두에 도움을 줍니다.

완성된 구조 동작

  • 데스크톱 → 메뉴가 항상 보이고 햄버거 버튼은 숨김
  • 모바일/태블릿 → 햄버거 버튼 클릭 시 메뉴 표시/숨김
  • 접근성 보장 → 스크린 리더 및 키보드 탐색 지원

예제 구현

마무리

JavaScript를 활용한 반응형 네비게이션 메뉴는 작은 화면에서도 사용성을 보장하며, Grid·Flexbox와 조합하면 더욱 완벽한 반응형 레이아웃을 구성할 수 있습니다.
실무에서는 접근성까지 고려해 구현하면 사용자 만족도를 크게 높일 수 있습니다.

Summary in English

Learn how to create a fully responsive navigation menu using JavaScript.
From hamburger menu design to accessibility enhancements, this guide covers everything you need for mobile and desktop compatibility.

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”

위로 스크롤