לוח עניניים
לפעמים צריך תפריט ניווט ענק, מורכב, מעוצב וקל לתחזוקה
את כל האתר של Dataloop בניתי עם אלמנטור, אז היה טבעי לחפש פתרון גם למגה-תפריט הניווט הענק (mega menu) שעוצב על ידי הסטודיו Muze. אז בחרתי להתקין את התוסף JetMenu של CrocoBlock. היה קל לבנות את התפריט ולעצב אותו עם CSS.
הבעיה: אי אפשר להציג תפריט נפתח במובייל. זה ישר מעביר לעמוד שלוחצים עליו
אבל עושה רושם שכרגע התוסף הזה לא כל כך בר-שימוש במובייל, כי אי אפשר להקליק על כותרת כדי לפתוח את התפריט. אז תוסף הקוד המצורפת היא הפתרון שיצרתי. אני למעשה לוקח את החץ שפונה מטה, ממקם אותו באופן מוחלט, ואז מותח את איזור ההקלקה שלו לכל הרוחב כדי שיקליקו עליו במקום הכותרת.
התנהגות תפריט הניווט במובייל
בגלל שהכותרת הן קישורים, אז אי אפשר להקליק על הכותרות במובייל מבלי ללחוץ עליהן.
לעומת התנהגות תפריט הניווט בדסקטופ
הפתרון: קוד ה-CSS שאיתו פתרתי את הבעיה
@media (max-width: 768px) {
.jet-mobile-menu-active .jet-menu .jet-menu-item>a.top-level-link
.jet-dropdown-arrow, .jet-mobile-menu-active .jet-menu .jet-menu-item>a.sub-level-link .jet-dropdown-arrow {
position: absolute;
left: 0%;
top: 4px;
width: 100vw;
z-index: 100;
margin-left: 0;
}
}