قائمة تنقل جانبية قابلة للطي

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

التنقل الجانبي القابل للطي هو قائمة مخفية على جانب الشاشة تنزلق للداخل عند النقر فوق زر. يساعد ذلك في توفير المساحة مع الاستمرار في منح المستخدمين وصولاً سريعاً إلى روابط التنقل.

أنشئ بنية HTML أساسية مع شريط تنقل جانبي وزر تبديل:

<button id="toggleNav">☰ Menu</button>

<nav id="sideNav" class="sidenav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

أضف CSS لتنسيق التنقل الجانبي:

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.3s;
  padding-top: 60px;
}

.sidenav.open {
  width: 250px;
}

أضف JavaScript لتبديل شريط التنقل:

const toggleBtn = document.getElementById('toggleNav');
const sideNav = document.getElementById('sideNav');

toggleBtn.addEventListener('click', function() {
  sideNav.classList.toggle('open');
});

عند النقر على الزر، سوف ينزلق شريط التنقل الجانبي للداخل أو للخارج اعتماداً على حالته الحالية.

التحدي

سهل

اجعل زر القائمة يعمل:

HTML: قم بتوصيل زر القائمة بدالة JavaScript باستخدام سمة onclick

JavaScript: اكتب دالة تفتح التنقل الجانبي عن طريق ضبط عرضه على "250px"

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Scandinavian Interior Design</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="sideNav" class="sidenav">
    <a href="javascript:void(0)" class="close-btn" onclick="closeNav()">X</a>
    <a href="#">Home</a>
    <a href="#">Philosophy</a>
    <a href="#">Materials</a>
    <a href="#">Inspiration</a>
    <a href="#">Contact</a>
  </div>

  <header>
    <span class="open-btn">☰ Menu</span>
    <h1>Scandinavian Interior Design</h1>
  </header>

  <main>
    <section>
      <h2>Calm, Functional, Beautiful</h2>
      <p>
        Scandinavian design is about more than looks — it’s about balance,
        comfort, and harmony. Spaces are uncluttered, airy, and filled with
        light, making homes feel both inviting and practical.
      </p>
    </section>

    <section>
      <h2>Natural Materials</h2>
      <p>
        Wood, stone, wool, and linen are at the heart of Scandinavian interiors.
        These natural elements bring warmth and a sense of connection to nature,
        while ensuring that every item is purposeful and timeless.
      </p>
    </section>
  </main>

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