תפריט המבורגר בCSS ללא פופאפ של אלמנטור (מעולה ל-SEO!)

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

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

יצירת האזור הנסתר

האזור הראשון בהדר יהיה האזור הגלוי.
נשים בו אייקון פותח – המבורגר, ונוסיף לו id בשם openMenu

האזור השני יהיה האזור הנסתר.
נפתח אזור חדש, נוסיף לו id בשם navMenu
כמו כן ניתן לו z-index גבוה יותר מהz-index של האזור הראשון.

נעצב אותו, נשים בו את התפריט,
נוסיף בו את אייקון הסגירה – X וניתן לו id בשם closeMenu

אחרי האייקון הסוגר נוסיף וידג'ט html

קוד JS להדבקה בוידג׳ט HTML

<script>
    document.getElementById("openMenu").onclick = function(){ 
        document.getElementById('navMenu').style.display = "flex";
    };
    
    document.getElementById("closeMenu").onclick = function(){ 
        document.getElementById('navMenu').style.display = "none";
    };
</script>
Code language: HTML, XML (xml)

עכשיו נלך לcustom css של האזור הנסתר, ונסתיר אותו באמצעות השורה הבאה:

קוד CSS

#navMenu{
    display: none;
}

selector{
    position: fixed;
}Code language: CSS (css)

עד כאן ההגדרות מתאימות גם להדר רגיל.
אם רציתם הדר צדדי המשיכו לשלבים הבאים:

הגדרות להדר צדדי

לאזור הראשון, הגלוי, נגדיר רוחב מלא (= אם אתם עובדים עם קונטיינר, אם לא, לא חייב), וגובה 100vh.
בcustom css של האזור נוסיף את הקוד הבא:

selector{
    position: fixed;
    width: 100%;
}
@media (min-width: 768px){
selector{
    max-width: 100px;
}
}
Code language: CSS (css)

כמובן שאתם יכולים לשנות את ה100px לכמה פיקסלים שבא לכם.

כדי שהתוכן באתר ידע לזוז 100px הצידה נלך להתאמה אישית>css מותאם,
או לאלמנטור>ניהול קודים
ונוסיף את הקוד הבא שיחול על כל הדפים באתר:

@media (min-width: 768px){
.site-content, .site-footer{
    margin-right: 100px;
}
}Code language: CSS (css)

סיימנו!