סתם עמוד

הפשוט והבעייתי


הסמנטי והטריקי

תפריט א’

תפריט


תפריט ב’

תפריט


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

אמצע
פה

הדר עם לוגו ממורכז – פריסה עם תפריט מפורק​

נוח אבל בעל אספקטים בעייתיים

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

  1. לייצר תפריט ימין
  2. לייצר תפריט שמאל
  3. לשים ביניהם את הלוגו 

איך עושים? אזור עם 3 עמודות, בעמודה הימנית תפריט ימין, בעמודה המרכזית תמונת לוגו, בעמודה השמאלית תפריט שמאל.

חסרונות השיטה

  1. שבירה של סמנטיות התפריט. למרות שויזואלית זה נראה יפה – אם נכבה את הסגנון והניראות לכדי שימושיות גרידא (בהקשר של סריקת האתר ע"י גוגל לדוגמה, או מנגנוני נגישות) נקבל שני תפריטים מנותקים – זה בעל פוטנציאל ממשי לבלבל את הניווט באתר.
  2. במובייל מתקבלת תצוגה מוזרה של שני תפריטים סגורים מנותקים. איך מסדרים זאת? בונים עוד תפריט ומציגים אותו במובייל. זה הכרח להשתמש בעוד תפריט שמשפיע בהתאמה על סעיף 1 ועל סעיף 3. שימו לב כאן לא הסתרתי בכוונה את שני התפריטים במובייל כדי שיהיה ניתן לראותם ועד כמה זה בעצם יוצא עקום :).
  3. ניהול מסורבל – במקום לנהל תפריט בודד, אנחנו נדרשים בכל שינוי לזכור לנהל 3. לפעם אחת זה לא נורא, אבל אם האתר מתעדכן תדיר, כל פעולות ניהול כפולות ומכופלות הן שואבות זמן ובעלות פוטנציאל להשכח.

מה אם אפשר אחרת?

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

תפריט


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

אמצע
פה

הדר עם לוגו ממורכז – פריסה עם תפריט מלא​

דרישות שהייתי רוצה לקיים

יתרונות השיטה

התפריט נשאר סמנטי שלם. גוגל רואה אותו כך. ניתן לנווט בו עם מקש טאב באופן רציף (נגישות).

חסרונות השיטה

מה הייתי צריך לעשות

1. להכניס לוגו כפריט בתפריט

בניהול התפריטים יצרתי תפריט עם 5 תאים. הפריט השלישי (האמצעי) ישמש אותנו כלוגו.
בחרתי בכוונה חלק מהפריטים מגוונים (טקסטים באורכים שונים + תת תפריט) כדי לאתגר את הפריסה ולמצוא נקודות שבהן היא נשברת. 

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

שמתי כאן נוח להעתקה.

				
					<img decoding="async" src="פה שמים את הכתובת המלאה של תמונת הלוגו"/>
				
			

את הכתובת ניתן להשיג במספר דרכים – אחת מהן היא דרך המדיה באתר – לפתוח את פריט הלוגו ולהסתכל משם איפה המיקום (ראו בתמונה).

כמו כן רואים בתמונה שנתתי קלאס logo-cell לפריט הזה בתפריט. הסיבה היא כי נרצה לתפוס אותו בקלות אחר כך בCSS. חשוב לא לפספס זאת.

2. להציג באלמנטור את התפריט

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

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

3. CSS מקוסטם

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

נשאר במחיצת ה"מתקדם" ונלך למחיצה האחרונה CSS מותאם אישית כדי להטמיע את בלוק הCSS הבא (אפשר פשוט להעתיק ולהדביק אבל בהמשך גם אפרט מה אנחנו רואים כאן)

				
					.full_menu .logo-cell img
{
    margin:auto;
    max-height:100px;
    object-fit: contain;
}
.full_menu .sub-menu.elementor-nav-menu--dropdown {
    width:100%;
    margin-left:unset!important;
    right:0;
}
@media (min-width:768px) {
    .full_menu .elementor-nav-menu--layout-horizontal {
        display:block;
    }
    .full_menu ul.elementor-nav-menu {
        display: grid;
        grid:  1fr / repeat(5, 1fr);
    } 
    .full_menu .elementor-nav-menu>li {
        align-self: center;
        display:inline;
    }
    .full_menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu a {
        white-space:unset;
    }
    .full_menu .logo-cell {
        grid-column: 3;
        grid-row:1;
    }
}
@media (max-width:767px) {
    /*.logo-cell.logo-cell {
        display:none;
    }*/
   .full_menu ul.elementor-nav-menu {
          display: grid;
    }
    .full_menu ul:not(.elementor-sub-item) a { 
        display: inline-block;
        width:100%;
        text-align:center;
    }
    .logo-cell {
           grid-row: 1;
    }
    .full_menu .logo-cell img {
        max-height:80px;
    }
}

				
			

הסברים והרחבות (אזהרת חפירות)

כאן אדביק חתיכות פרטניות ואסביר את חלקן.
ראשית רוב הקוד מחולק לשני גדלים (דסקטופ/מובייל).

				
					@media (min-width:768px) {
   /*this is tablet + desktop*/
}
@media (max-width:767px) {
   /*This is mobile*/
}

				
			

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

				
					.full_menu .logo-cell img
{
    margin:auto;
    max-height:100px;
    object-fit: contain;
}
				
			

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

אז המארג’ין הוא כדי למרכז.
הMAX-HEIGHT איתו אני שולט על גודל הלוגו. אתם בטח שואלים למה לפי גובה – כי ידעתי מראש שבתפריטים שונים יהיו גבהים שונים ואם יש משהו שארצה להתיישר סביבו זה הגובה. כך שבעצם הערך הזה צריך להיות גובה התפריט שאתם רוצים. התמונה תגדל בגובה (ובהתאמה ברוחב).
אפשרות אחרונה כאת היא הOBJECT-FIT – שבעצם אומרת לתמונה שלא משנה באיזה גודל היא מוצגת – תמיד להכיל את כולה (להלן "contain") מבלי לחתוך אותה (יש תכונה דומה לכך ברקעים שקובעים גודל רקע באלמנטור, זה עובד על אותו עקרון).
בתמונה לדוגמה ניתן לראות שבקלות הגדלתי את הלוגו (לגודל לא הגיוני) – והמבנה עדיין נשמר. יכולתי להגדיל עוד.

				
					.full_menu .sub-menu.elementor-nav-menu--dropdown {
    width:100%;
    margin-left:unset!important;
    right:0;
}
				
			

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

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

				
					
    .full_menu ul.elementor-nav-menu {
        display: grid;
        grid:  1fr / repeat(5, 1fr);
    } 
    .full_menu .logo-cell {
        grid-column: 3;
        grid-row:1;
    }
				
			

אנחנו אומרים כאן בעצם שרשימת התפריט (ul=unoredered list) שתהיה מסוג גריד ותתחלק ל5 מקטעים (כמספר התאים שלנו בתפריט).
ואחר כך אנחנו אומרים פריט לוגו שימוקם בשורה הראשונה בטור השלישי (כלומר "באמצע").
* הייתי מאוד שמח למצוא דרך להיות יותר גמיש כאן ולא לקבוע מראש כמה עמודות יש (היות ואני רואה בתפריטים מרכיב דינאמי שיכול להשתנות) אבל כרגע זה יעשה את העבודה.

				
					.full_menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu a {
        white-space:unset;
    }
				
			

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

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

				
					.full_menu .elementor-nav-menu>li {
        align-self: center;
        display:inline;
    }
				
			

כאן יש הגדרה לתכנים שבפריטי התפריט (הם מתויגים כאלמנט <li> ולכן אותם אנחנו תופסים) – להיות ממורכזים וורטיקלית (כלומר לגובה). זה אומר שהקישורים בתפריט מיושרים למרכז בגובה עם הלוגו.

רגע – מה אתה סח פה עם הstart וה-end??
ובכן תחשבו על זה כך – start בעצם מייצג התחלה של בלוק (וכאן מדובר על הלמעלה) וend  מייצג סוף של בלוק (במקרה כאן – תחתיתו).

מובייל

				
					@media (max-width:767px) {
    /*.logo-cell.logo-cell {
        display:none;
    }*/
   .full_menu ul.elementor-nav-menu {
          display: grid;
    }
    .full_menu ul:not(.elementor-sub-item) a { 
        display: inline-block;
        width:100%;
        text-align:center;
    }
    .logo-cell {
           grid-row: 1;
    }
    .full_menu .logo-cell img {
        /*גובה לוגו ייחודי למובייל*/
        max-height:80px;
    }
}
				
			

במובייל חיפשתי לפשט ולמרכז את כל התאים.

קצת על גמישות

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

אם לדוגמה עכשיו התפריט רחב לי מדי והייתי רוצה לצמצם אותו  – מספיק שאשחק עם המארג’ינים של האלמנט והוא כבר יסתדר מעצמו. אני גם יכול להמשיך לעצב באלמנטור את הסגנון של התפריט בכלים המובנים והתפריט אמור להשאר שלם (נו בטוח מישהו ימצא לי באג:).

פאדינג גאון שכותב על תמונות. זה פאדינג.

סיכום דברים

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

מצוין! המסר נשלח

אם יש לך שאלה בנוגע לאחד המאמרים , מומלץ לשאול שם בתגובות. מכאן ניתן להמשיך לאן שייבחר על ידך.

הבנתי, בוא נמשיך

יש לכם שאלה? רצון לפניה?

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