מתג תפריט המבורגר במובייל

חלק מהיחידה JavaScript בפעולה במסלול ה-HTML של Coddy. שיעור 13 מתוך 27.

במסכים קטנים, אתרים משתמשים לעיתים קרובות בסמל המבורגר (☰) במקום להציג את כל סרגל הניווט. כשהמשתמש לוחץ על סמל ההמבורגר, JavaScript משנה את מצב הנראות של תפריט הניווט.

ראשית, צרו את מבנה ה-HTML הבסיסי: כפתור עם 3 רכיבי (שיעוצבו כקווים ב-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');

// הוסיפו מאזין לאירוע לחיצה על כפתור ההמבורגר
burgerBtn.addEventListener('click', function() {
  // הוסיפו או הסירו את המחלקה hidden מתפריט הניווט לנייד
  mobileNav.classList.toggle('hidden');
});

כשלוחצים על כפתור ההמבורגר, המחלקה hidden מופעלת או מוסרת מתפריט הניווט, וכך הוא מופיע או נעלם.

אתגר

קל

בתוך מאזין האירועים של כפתור ההמבורגר, הוסף שתי שורות קוד:

החלף את המחלקה "active" בכפתור. כך שלושת הקווים יהפכו ל־“X”.
החלף את המחלקה "active" בתפריט. כך תפריט הניווט יופיע וייעלם.

נסו בעצמכם

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