ניווט צד מתקפל

חלק מהיחידה JavaScript בפעולה במסלול ה-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>