반응형 네비게이션 바

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

챌린지

쉬움

마야 문명에 관한 웹사이트의 버거 메뉴와 네비게이션을 위한 HTML 및 CSS가 준비되어 있습니다.

여러분의 과제는 버튼을 클릭했을 때 메뉴가 열리고 닫히도록 JavaScript를 작동시키는 것입니다.

다음 단계를 따르세요:

getElementById("burger")를 사용하여 버거 버튼 요소를 저장할 변수를 생성합니다.
getElementById("navMenu")를 사용하여 네비게이션 메뉴를 저장할 또 다른 변수를 생성합니다.
버튼에 이벤트 리스너를 추가하여 클릭 시 함수가 실행되도록 합니다.
이 함수 내부에서:
- 버튼의 "active" 클래스를 토글합니다 (이것은 3개의 선을 애니메이션화합니다).
- 메뉴의 "active" 클래스를 토글합니다 (이것은 링크를 표시하거나 숨깁니다).

올바르게 완료되면, 버거 버튼을 클릭했을 때 선들이 "X" 모양으로 애니메이션화되고 네비게이션 메뉴가 나타나야 합니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Maya Civilization</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="logo">Maya World</div>
    <div id="burger" class="burger-btn">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
    <nav id="navMenu" class="nav-links">
      <a href="#">Home</a>
      <a href="#">History</a>
      <a href="#">Culture</a>
      <a href="#">Architecture</a>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h1>The Maya Civilization</h1>
      <p>
        The Maya civilization thrived in Mesoamerica, known for its remarkable
        achievements in astronomy, mathematics, and monumental architecture.
      </p>
    </section>

    <section class="content">
      <h2>Legacy of the Maya</h2>
      <p>
        The Maya left behind impressive cities, pyramids, and written language. 
        Their deep knowledge of astronomy influenced calendars and rituals, while 
        their art and traditions continue to inspire today.
      </p>
      <img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/El_Castillo%2C_Chich%C3%A9n_Itz%C3%A1.jpg"
           alt="Maya Pyramid" class="content-img">
    </section>
  </main>

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