מדריך ליצירת תפריט נפתח רספונסיבי עם CSS ו-JavaScript

שלב 1: מבנה HTML

נתחיל עם מבנה HTML בסיסי:

<nav class="navbar">
  <div class="brand">לוגו האתר</div>
  <ul class="nav-links">
    <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>
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>
</nav>

הסבר:

<nav> מייצג את התפריט כולו.

<div class="brand"> מכיל את לוגו האתר או שמו.

<ul class="nav-links"> מכיל את רשימת הקישורים.

<div class="burger"> הוא כפתור ה"המבורגר" שיופיע במסכים קטנים.

שלב 2: עיצוב CSS

נוסיף CSS כדי לעצב את התפריט:

/* עיצוב בסיסי */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.navbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #5D4037;
  font-family: 'Poppins', sans-serif;
}

.brand {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 30%;
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: bold;
  font-size: 14px;
}

.burger {
  display: none;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 5px;
  transition: all 0.3s ease;
}

/* מדיה קוורי לרספונסיביות */
@media screen and (max-width: 1024px) {
  .nav-links {
    width: 60%;
  }
}

@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: fixed;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #5D4037;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    display: block;
    cursor: pointer;
  }
}

.nav-active {
  transform: translateX(0%);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2 {
  opacity: 0;
}
.toggle .line3 {
  transform: rotate(45deg) translate(-5px,-6px);
}

הסבר:

השתמשנו ב-Flexbox ליצירת פריסה נוחה של התפריט.

הגדרנו עיצוב בסיסי לקישורים ולכפתור ההמבורגר.

השתמשנו במדיה קוורי כדי להתאים את העיצוב למסכים קטנים.

הוספנו אנימציות לפתיחה וסגירה של התפריט.

שלב 3: הוספת JavaScript

לבסוף, נוסיף JavaScript כדי להפעיל את התפריט:

document.addEventListener('DOMContentLoaded', () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');
  
  burger.addEventListener('click', () => {
    // הפעלת התפריט
    nav.classList.toggle('nav-active');
    
    // אנימציה לקישורים
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = '';
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
      }
    });
    
    // אנימציה לכפתור ההמבורגר
    burger.classList.toggle('toggle');
  });
});

הסבר:

אנחנו מאזינים לאירוע הקליק על כפתור ההמבורגר.

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

האנימציות מופעלות בצורה מדורגת על כל קישור בתפריט.

סיכום

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

זכרו תמיד לבדוק את התפריט בגדלי מסך שונים ולהתאים את הקוד לפי הצורך. ניתן להוסיף תכונות נוספות כמו תת-תפריטים או אנימציות מורכבות יותר לפי הצורך.