شريط تنقل متجاوب

جزء من قسم JavaScript in Action في رحلة HTML على Coddy — الدرس 26 من 27.

التحدي

سهل

لدينا كود HTML و CSS لقائمة الـ burger والتنقل في موقعنا الإلكتروني حول حضارة المايا.

مهمتك هي جعل كود JavaScript يعمل بحيث تفتح القائمة وتغلق عند النقر على الزر.

اتبع الخطوات التالية:

قم بإنشاء متغير لتخزين عنصر زر الـ burger باستخدام getElementById("burger").
قم بإنشاء متغير آخر لتخزين قائمة التنقل باستخدام getElementById("navMenu").
أضف مستمع أحداث (event listener) على الزر بحيث يتم تشغيل وظيفة (function) عند النقر عليه.
داخل هذه الوظيفة:
- قم بتبديل (Toggle) فئة "active" على الزر (سيؤدي ذلك إلى تحريك الخطوط الثلاثة).
- قم بتبديل (Toggle) فئة "active" على القائمة (سيؤدي ذلك إلى إظهار أو إخفاء الروابط).

عند القيام بذلك بشكل صحيح، سيؤدي النقر على زر الـ burger إلى تحريك الخطوط لتصبح على شكل "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>