ברוב האתרים, תפריט המובייל נשאר די גנרי, אותו רוחב, אותם מרווחים, ואותו סטייל בסיסי. אבל עם כמה שורות CSS פשוטות, אפשר לקחת שליטה מלאה ולהפוך את התפריט למעוצב, ברור ונוח יותר לשימוש.
הקוד הבא משתמש ב- media queries כדי להפריד בין דסקטופ למובייל וטאבלט, וכך מאפשר התאמה מדויקת לכל מסך.
בדסקטופ (מעל 1024px) בוצעה התאמה קטנה לאייקון החץ של התת תפריט – הקטנה שלו ויישור עדין כדי שיישב טוב יותר לצד הטקסט.
לעומת זאת, במובייל וטאבלט קורה השינוי האמיתי:
רוחב התפריט מוגדר ל- 300px, מה שנותן תחושה יותר "אפליקטיבית" ופחות מתוחה על כל המסך
מיקום התפריט מיושר לימין במקום ברירת המחדל
כפתור ההמבורגר מקבל ריווח נקי יותר
תתי התפריטים מקבלים צבע רקע, בלי פינות מעוגלות, עם הפרדות בין פריטים
מרווחים וגודל פונט מותאמים לקריאות טובה יותר
נוסף גם hover עם צבע שונה שנותן פידבק ויזואלי ברור
טיפ:
אם תרצו לשלוט בכיוון פתיחת התפריט (ימין או שמאל), או להזיז אותו פנימה/החוצה מהמסך, שחקו עם הערכים של right, left ו-width בהתאם לעיצוב שאתם רוצים להשיג.
לאחר שנטמיע את הקוד הזה נקבל תפריט מובייל שנראה הרבה יותר מוקפד, ברור ונעים לשימוש, בלי תלות בתוספים או פתרונות כבדים.
@media only screen and (min-width: 1024px) {
selector .sub-arrow {
font-size: 70%;
margin: 5px 0 0 -3px;
}
}
@media only screen and (max-width: 1024px) {
selector nav {
width: 300px !important;
left: unset !important;
right: 0px !important;
}
selector .sub-arrow {
font-size: 70%;
}
selector ul.sub-menu li:not(:last-child) {
border-color: red !important;
}
selector ul.sub-menu li:first-child a {
border-radius: 0 !important;
}
selector ul.sub-menu li.menu-item a {
padding: 8px 25px !important;
font-size: 16px !important;
}
selector ul.sub-menu li:last-child a {
border-radius: 0 !important;
}
}