모바일 버거 메뉴 토글

Coddy HTML 여정의 JavaScript in Action 섹션에 포함된 레슨 — 27개 중 13번째.

작은 화면에서 웹사이트는 전체 내비게이션을 표시하는 대신 종종 버거(☰) 아이콘을 사용합니다. 사용자가 버거 아이콘을 클릭하면 JavaScript가 내비게이션 메뉴의 표시 여부를 전환합니다.

먼저 기본적인 HTML 구조를 만듭니다. 3개의 span(버거 아이콘을 만들기 위해 CSS에서 선으로 스타일이 지정됨)이 있는 버튼과 메뉴 링크를 포함하는 숨겨진 <nav>를 작성합니다.

<button id="burger-btn" class="burger-menu">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</button>

<nav id="mobile-nav" class="hidden">
  <ul>
    <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>

이제 버거 메뉴의 스타일을 지정하기 위해 몇 가지 기본적인 CSS를 추가해 보겠습니다:

.burger-menu {
  display: block;
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
}

.hidden {
  display: none;
}

/* hidden 클래스가 없을 때 내비게이션을 표시합니다 */
nav:not(.hidden) {
  display: block;
}

이제 메뉴를 토글하는 자바스크립트를 추가하세요:

// 버거 버튼과 모바일 내비게이션을 선택합니다
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// 버거 버튼에 클릭 이벤트 리스너를 추가합니다
burgerBtn.addEventListener('click', function() {
  // 모바일 내비게이션에서 hidden 클래스를 토글합니다
  mobileNav.classList.toggle('hidden');
});

버거 버튼을 클릭하면 내비게이션 메뉴에서 hidden 클래스가 토글되어 메뉴가 나타나거나 사라집니다.

챌린지

쉬움

버거 버튼의 이벤트 리스너 내부에 다음 두 줄의 코드를 추가하세요:

button에 "active" 클래스를 토글합니다 — 이렇게 하면 세 개의 선이 "X" 모양으로 애니메이션됩니다.
menu에 "active" 클래스를 토글합니다 — 이렇게 하면 내비게이션 메뉴가 나타나거나 사라지게 됩니다.

직접 해보기

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Minimalism Lifestyle</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- 버거 버튼 -->
  <div id="myButton" class="burger-btn">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>

  <!-- 네비게이션 메뉴 -->
  <nav id="myMenu" class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Philosophy</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!-- 메인 콘텐츠 -->
  <header class="hero">
    <h1>Minimalism</h1>
    <p>Less but better. Enjoy the essentials, remove the noise.</p>
    <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=1200&q=80" alt="Minimalist interior">
  </header>

  <section class="content">
    <h2>The Essence of Minimalism</h2>
    <p>
      Minimalism is not about having less, but about making room for what truly matters. 
      It is about quality over quantity, clarity over clutter, and creating spaces that breathe. 
      Whether in design or lifestyle, minimalism helps us live with purpose and appreciation.
    </p>
  </section>

  <script src="script.js"></script>
</body>
</html>