모바일 버거 메뉴 토글

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

작은 화면에서는 웹사이트가 전체 navigation을 표시하는 대신 burger (☰) 아이콘을 사용하는 경우가 많습니다. 사용자가 burger 아이콘을 click하면 JavaScript가 navigation menu의 표시 여부를 toggle합니다.

먼저 기본 HTML 구조를 만드세요. 버튼 안에 3개의 span을 넣고(CSS에서 선으로 스타일을 지정하여 burger 아이콘을 형성함), 메뉴 링크를 포함하는 숨겨진 <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>

이제 burger menu의 스타일을 지정하기 위해 몇 가지 기본 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;
}

/* Show the navigation when it doesn't have the hidden class */
nav:not(.hidden) {
  display: block;
}

이제 메뉴를 toggle하도록 JavaScript를 추가하세요:

// Select the burger button and mobile navigation
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// Add click event listener to the burger button
burgerBtn.addEventListener('click', function() {
  // Toggle the hidden class on the mobile navigation
  mobileNav.classList.toggle('hidden');
});

burger button을 click하면 navigation menu에서 hidden class가 toggle되어, making navigation menu가 나타나거나 사라집니다.

챌린지

쉬움

burger button의 event listener 안에 두 줄의 코드를 추가하세요:

button의 "active" class를 Toggle하세요. 그러면 세 줄이 “X” 모양으로 애니메이션됩니다.
menu의 "active" class를 Toggle하세요. 그러면 navigation menu가 나타났다가 사라집니다.

직접 해보기

<!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>