אפקט תפריט צד נפתח באלמנטור + תפריט אפליקציה במובייל

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

אפקטי CSS

יש לשים ווידגט רשימת אייקונים בתוך קונטיינר. על רשימת האייקונים. לשים את הקלאס side-menu ועל הקונטיינר את הקלאס side-menu-wrapper. את הקונטיינר יש לשים במיקום מקובע בהתאם להדרכה בסרטון.
יש לשים את הקוד בתוך ווידגט html או בעורך קודים של אלמנטור תחת body end

<style>
/*תפריט צד דססקטופ*/
@media(min-width:1025px){

.side-menu, .side-menu-wrapper{
width:4.2vw; /*רוחב תפריט סגור*/
transition: all 0.5s !important; /*משך האנימציה של פתיחת התפריט*/
overflow: hidden;
}

.side-menu .elementor-icon-list-item:nth-child(7){
    display: none !important; /*הסתרת פריט 6 (תפריט מלא) מתפריט דסקטופ*/
}

.side-menu .elementor-icon-list-items, .side-menu-login .elementor-icon-list-items{
    display: flex;
    flex-direction: column; /*כיוון רשימת אייקונים טור*/
}

.side-menu .elementor-icon-list-text, .side-menu-login .elementor-icon-list-text{
    opacity: 0; /*הסתרת שם העמוד כשהתפריט סגור*/
    text-wrap:nowrap; /*ביטול ירידת שורה בטקסט ארוך*/
    transition: all 0.3s;
}

.side-menu .elementor-icon-list-item{
     padding:1vw!important; /*שוליים פנימיים פריט רשימה*/
    border-radius: 50px; /*עיגול פינות פריט רשימה*/
    transition: all 0.3s;
}

.side-menu-wrapper:hover, .side-menu{
    min-width:15vw !important; /*רוחב תפריט פתוח*/
    width:15vw; /*רוחב תפריט פתוח*/
}

.side-menu-wrapper:hover .elementor-icon-list-text, .side-menu-wrapper:hover .elementor-icon-list-text{
    opacity: 1; /*הצגת שם העמוד במעבר עכבר*/
}

.side-menu .elementor-icon-list-item:hover{
 background: #ffffff; /*צבע רקע פריט רשימה במעבר עכבר*/
}
}

/*הגדרות פריט פעיל לכל גדלי המסך*/
.side-menu .elementor-icon-list-item.active {
  background-color: #17A1F8; /*צבע רקע פריט פעיל*/
  transition: all 0.3s ease;
}

.side-menu .elementor-icon-list-item.active a, .side-menu .elementor-icon-list-item.active,  .side-menu .elementor-icon-list-item.active i {
  color: white !important; /*צבע טקסט פריט פעיל*/
  transition: all 0.3s ease;
}


/*תפריט תחתון טאבלט*/
@media(max-width:1025px){
 
.side-menu .elementor-icon-list-item:nth-child(4), .side-menu .elementor-icon-list-item:nth-child(5){
    display: none !important; /*הסתרת פריט 4 ו5 ברשימה כדי שהכל ייכנס*/
}

.side-menu, .side-menu-wrapper{
max-width:95vw !important; /*רוחב רשימת פריטים*/
transition: all 0.2s;
height:10vw; /*גובה תפריט*/
}

.side-menu .elementor-icon-list-items, .side-menu-login .elementor-icon-list-items{
    display:flex;
    flex-direction: row !important; /*כיוון רשימה לשורה*/
    flex-wrap:nowrap; /*ביטול ירידת שורה שהכל ייכנס בשורה אחת*/
  justify-content: space-around; /*ריווח אוטומטי לכל אורך הקונטיינר*/
 align-items: flex-end !important; /*יישור כל הפריטים למטה*/
}

.side-menu .elementor-icon-list-text{
    opacity: 1; 
    text-wrap:nowrap; /*ביטול ירידת שורה על שם העמוד*/
    text-align:center; /*יישור שם העמוד למרכז*/
    transition: all 0.3s;
}

.side-menu .elementor-icon-list-item, .side-menu .elementor-icon-list-item a, .side-menu-login .elementor-icon-list-item{
padding: 1vw; /*שוליים פנימיים פריט רשימה*/
display:flex !important;
flex-direction:column !important; /*כיוון פריט טור, אייקון מעל טקסט*/
        justify-content: flex-end;
align-content:center;
gap:1vw; /*ריווח בין טקסט לאייקון*/
 align-items: center;
}

.side-menu .elementor-icon-list-item{
    height:10vw; /*גובה פריט רשימה בודד*/
    width:19vw; /*רוחב פריט רשימה בודד*/
    border-radius: 5px; /*עיגול פינות פריט רשימה בודד*/
    transition: all 0.3s;
}
}



/*הגדרות מובייל*/
@media(max-width:767px){
 
.side-menu, .side-menu-wrapper{
width:100% !important; /*רוחב תפריט*/
height:80px; /*גובה תפריט*/
}

.side-menu .elementor-icon-list-text{
    text-wrap:wrap; /*מאפשר ירידת שורה בכותרת שם העמוד*/
}

.side-menu .elementor-icon-list-item, .side-menu .elementor-icon-list-item a {
padding: 5px 2px 5px 5px; /*שוליים פנימיים פריט רשימה בודד*/
gap:5px; /*ריווח בין כותרת לאייקון*/
}

.side-menu .elementor-icon-list-item{
    height:70px; /*גובה פריט רשימה בודד*/
    width:70px; /*רוחב פריט רשימה בודד*/
     border-radius: 20px; /*עיגול פינות פריט רשימה בודד*/
}
}    
    
</style>



<script>
document.addEventListener("DOMContentLoaded", () => {
  const currentUrl = window.location.href;
  const menu = document.querySelector(".side-menu");

  if (menu) {
    const items = menu.querySelectorAll(".elementor-icon-list-item");

    items.forEach((item) => {
      const link = item.querySelector("a");

      if (link && link.href === currentUrl) {
        item.classList.add("active");
      }
    });
  }
});

</script>
[safe_code_display]

אם אתם כבר במוד למידה, קבלו הדרכות שוות נוספות:

gsap (56)
GSAP / Java Script

אנימציית תמונה נחשפת בגלילה + גלילה צידית

gsap (52)
שיווק ועסקי

תרגולילה #8 – עבודה מול לקוחות פרימיום

gsap (46)
אפקטי CSS

תרגולילה #7 – אנימציות ב-CSS והשקת סדנאות הספיישל

gsap (27) (1)
פיתוח

תרגולילה #6 – 12 שיטות לפיתוח מושלם