סרגל ניווט רספונסיבי

חלק מהיחידה JavaScript בפעולה במסלול ה-HTML של Coddy. שיעור 26 מתוך 27.

אתגר

קל

יש לנו את ה-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>