تبديل قائمة البرغر على الهاتف المحمول

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

على الشاشات الصغيرة، غالبًا ما تستخدم مواقع الويب رمز burger (☰) بدلًا من عرض navigation بالكامل. عندما ينقر المستخدم على رمز burger، يعمل JavaScript على تبديل مستوى ظهور navigation menu.

أولًا، أنشئ بنية 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>

لنُضِف الآن بعض CSS الأساسي لتنسيق قائمة burger:

.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;
}

الآن، أضف JavaScript لتبديل menu:

// 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، يتم تبديل class hidden على navigation menu، making إياها تظهر أو تختفي.

التحدي

سهل

داخل event listener الخاص بـ burger button، أضف سطرين من التعليمات البرمجية:

نفّذ "active" على button. سيؤدي ذلك إلى تحريك الخطوط الثلاثة لتكوين “X”.
نفّذ "active" على menu. سيجعل ذلك قائمة navigation تظهر وتختفي.

جرّب بنفسك

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