תפריט נפתח רספונסיבי

קיימים הרבה רכיבים לדרופל עבור תפריט רספונסיבי, בדקתי את רובם ורובם מכילים הרבה css והרבה js.

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

הוספתי class ראשי לתפריט הראשי שנקרא hide-mobile, ב-css אני זורקת במובייל את הקלאס הזה לצד שמאל של המסך על מנת שכאשר הוא יגיע הוא יגיע באפקט יפה מצד שמאל (עוד סיבה לכך שאני מעדיפה לכתוב לבד כי כך אני יכולה לשלוט בקלות מאיפה ובאיזה אופן התפריט יגיע)

<ul class="menu-ul hide-mobile">
    <li><a href="#">first</a></li>
    <li><a href="#">second</a></li>
    <li><a href="#">third</a></li>    
</ul>
 

הוספתי  div ב-html שיהיה כפתור התפריט [מופיע רק במובייל]. הוא מכיל שלוש שורות של <span></span> כאשר לכל span נתתי רוחב וגובה על מנת שיווצרו לי שלושה קווים יפים לתפריט המבורגר.

<span class="icon-bar bar1"></span>
<span class="icon-bar bar2"></span>
<span class="icon-bar bar3"></span>

לחיצה על הכפתור גורמת לשני דברים:

  • השמטת הקלאס close והוספב של קלאס open.

כיוון שכעת יש קלאס אחר של open, אני יכולה לתת פקודות שונות ב-css:

שלושת הקווים נהפכים ל-x בעזרת css ופקודת ה-transition: העלמתי את הספאן האמצעי ואת שני האחרים סובבתי בעזרת פקודת

transform: rotate(135deg);

כיוון שנתתי ל-span.icon-bar את הפקודה tansition: all 0.5s, הקווים הסתובבו בצורה יפה והסתדרו ל-x.

  • השמטת הקלאס hide-mobile, מה שגורם כעת לתפריט להגיע חזרה למסך, בעזרת הפקודה ה-transition ב-css אני גורמת לתפריט להגיע יפה מצד שמאל של המסך.

 

כמובן שלחיצה נוספת על mobile-menu גורמת לקלאס close להחליף חזרה את ה-open ולהחזרה של הקלאס hide-mobile, מה שגורם לתפריט שוב להיעלם ולאיקס לחזור להיות שלושה קווים.

 

ניתן כמובן ליצור אפקטים נוספים:

  • רקע בהיר לכל שאר המסך כאשר התפריט נפתח (על ידי הוספת קלאס ל-body, כאשר התפריט נפתח ואז נותנים לקלאס הזה opacity: 0.8)
  • לחיצה על כל איזור אחר כאשר התפריט פתוח יסגור את התפריט (אם יש לנו קלאס ראשי ב-body כאשר התפריט פתוח, ניתן לתפוס את האירוע של לחיצה על איזור התוכן כאשר התפריט פתוח ולתת חזרה את הקלאסים של סגירת התפריט)

 

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

את הקוד המלא ניתן להוריד מפה -  http://jsbin.com/malotigewo/1/edit?html,css,js,output

בעזרת עוד כמה פקודות js ושימוש ב-css אפשר להפוך אותו להיות בכמה רמות (רמות נפתחות בלחיצה על הרמה הראשית). 

  
את התוצאות אפשר לראות באתר הזה שלנו

לעוד על עבודות בניית אתרים שלנו כנסו לדף הראשי.