تبديل قائمة البرجر للجوال

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

على الشاشات الصغيرة، غالبًا ما تستخدم المواقع الإلكترونية أيقونة البرجر (☰) بدلاً من إظهار قائمة التنقل الكاملة. عندما ينقر المستخدم على أيقونة البرجر، تقوم 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;
}

الآن، أضف JavaScript لتبديل القائمة:

// اختر زر البرجر وقائمة التنقل للهاتف المحمول
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// أضف مستمع لحدث النقر (click) على زر البرجر
burgerBtn.addEventListener('click', function() {
  // قم بتبديل فئة (class) "hidden" في قائمة التنقل للهاتف المحمول
  mobileNav.classList.toggle('hidden');
});

عندما تنقر على زر البرجر، يتم تبديل فئة hidden في قائمة التنقل، مما يجعلها تظهر أو تختفي.

التحدي

سهل

داخل مستمع الأحداث (event listener) لزر البرجر، أضف سطرين من التعليمات البرمجية:

قم بتبديل (Toggle) فئة "active" على الزر — سيؤدي هذا إلى تحريك الخطوط الثلاثة لتصبح على شكل "X".
قم بتبديل (Toggle) فئة "active" على القائمة — سيؤدي هذا إلى إظهار وإخفاء قائمة التنقل.

جرّب بنفسك

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Minimalism Lifestyle</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- زر القائمة (Burger) -->
  <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>