Foldbare Divi Mobilmenuer: En Komplet Guide

I den digitale tidsalder er en optimeret mobiloplevelse ikke længere en luksus, men en nødvendighed. Brugere tilgår websites fra en bred vifte af enheder, og forventningen om en intuitiv og effektiv navigation på små skærme er høj. Selvom Divi-temaet fra Elegant Themes er kendt for sine omfattende tilpasningsmuligheder og brugervenlighed, er der én specifik funktion, der ikke er indbygget som standard: muligheden for at kollapse undermenuer i mobilmenuen. Dette kan hurtigt føre til en rodet og overvældende navigationsoplevelse, især for hjemmesider med mange sider og dybe menustrukturer. Men fortvivl ikke! Denne omfattende guide vil trin for trin vise dig, hvordan du kan forvandle din Divi mobilmenu, så den bliver både foldbar og visuelt tiltalende. Vi vil dykke ned i den mest effektive og enkleste metode til at opnå denne funktionalitet, samtidig med at vi forbedrer udseendet med stilfulde udfoldningsikoner. Gør dig klar til at tage din hjemmesides mobilnavigation til det næste niveau og give dine besøgende en problemfri brugeroplevelse.

Hvorfor er en foldbar mobilmenu afgørende for din hjemmeside?

Forestil dig at besøge en hjemmeside på din smartphone, hvor mobilmenuen åbner og afslører en lang liste af hovedpunkter og alle deres underpunkter spredt ud på én gang. Dette kan hurtigt virke uoverskueligt og frustrerende. En foldbar mobilmenu løser dette problem ved at præsentere hovedmenupunkterne pænt og lade brugeren aktivt vælge at folde undermenuerne ud, når de har brug for det. Dette skaber en langt mere strømlinet og organiseret navigationsoplevelse, som har flere konkrete fordele:

• Forbedret brugervenlighed (UX): En kollapset menu giver en renere og mindre forstyrrende visning. Brugere kan hurtigt scanne hovedkategorierne og nemt finde det, de søger, uden at blive overvældet af for mange valgmuligheder på én gang. Dette reducerer den kognitive belastning og øger sandsynligheden for, at besøgende bliver længere på din side.
• Optimeret skærmplads: På små mobilskærme er plads en knap ressource. Ved at skjule undermenuer som standard frigives værdifuld skærmplads, hvilket giver mere plads til dit indhold og sikrer, at vigtige elementer ikke skubbes ud af syne.
• Hurtigere navigation: Når menuen er organiseret og nem at overskue, kan brugere navigere hurtigere og mere effektivt. Dette fører til en mere flydende interaktion med din hjemmeside og en reduceret afvisningsprocent (bounce rate).
• Professionelt udseende: En velstruktureret og funktionel mobilmenu signalerer professionalisme og opmærksomhed på detaljer. Det viser, at du værdsætter dine besøgendes tid og stræber efter at give dem den bedst mulige oplevelse.
• SEO-fordele: Selvom det ikke er en direkte SEO-faktor, bidrager en god brugeroplevelse indirekte til bedre placeringer i søgemaskinerne. Google og andre søgemaskiner prioriterer hjemmesider, der er brugervenlige og tilbyder en god oplevelse på mobil.

At investere tid i at optimere din mobilmenu er derfor en investering i din hjemmesides succes og dine besøgendes tilfredshed.

Sådan implementeres jQuery for at kollapse undermenuer i Divi

Målet er at transformere den standardudfoldede liste i Divi mobilmenuen til et attraktivt og kompakt format. Dette opnås ved at integrere jQuery og CSS-kode. jQuery-delen af denne løsning er ansvarlig for at tilføje den interaktive funktionalitet, der gør, at undermenuerne kan foldes ud og ind. Det er den kode, der "lytter" efter brugerens klik og derefter udfører den ønskede handling.

Forståelse af jQuery-koden:

Her er det jQuery-kodeuddrag, du skal bruge, og en forklaring af dets funktion:

jQuery(function($) { $(document).ready(function() { $("body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children").append(''); $('ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ul.et_mobile_menu li.page_item_has_children .mobile-toggle').click(function(event) { event.preventDefault(); $(this).parent('li').toggleClass('dt-open'); $(this).parent('li').find('ul.children').first().toggleClass('visible'); $(this).parent('li').find('ul.sub-menu').first().toggleClass('visible'); }); iconFINAL = 'P'; $('body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children').attr('data-icon', iconFINAL); $('.mobile-toggle').on('mouseover', function() { $(this).parent().addClass('is-hover'); }).on('mouseout', function() { $(this).parent().removeClass('is-hover'); }) }); });

Lad os gennemgå, hvad de vigtigste dele af denne kode gør:

• jQuery(function($) { ... });: Dette er en almindelig måde at sikre, at jQuery kører i "no-conflict" tilstand, så det ikke kolliderer med andre JavaScript-biblioteker, der måtte bruge $ symbolet.
• $(document).ready(function() { ... });: Denne funktion sikrer, at koden først kører, når hele DOM (Document Object Model) er fuldt indlæst. Det er god praksis for at undgå fejl.
• $("body ul.et_mobile_menu li.menu-item-has-children, ...").append('<a href="#" class="mobile-toggle"></a>');: Dette er kernen i funktionaliteten. Den finder alle menupunkter i mobilmenuen (ul.et_mobile_menu) der har underpunkter (identificeret ved klasserne menu-item-has-children eller page_item_has_children) og tilføjer en ny, tom anker-tag (<a>) med klassen mobile-toggle til dem. Dette <a>-tag vil fungere som din klikbare udfoldningsknap.
• $('ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ...').click(function(event) { ... });: Denne del af koden lytter efter klik på de netop tilføjede .mobile-toggle elementer. Når der klikkes, udføres følgende handlinger:
  • event.preventDefault();: Stopper standardhandlingen for linket (at navigere til #), hvilket er vigtigt, da vi kun ønsker at udføre JavaScript-funktionalitet.
  • $(this).parent('li').toggleClass('dt-open');: Finder forældre-li-elementet til den klikkede knap og skifter klassen dt-open. Denne klasse bruges senere af CSS til at ændre udseendet af det menupunkt, der er åbent (f.eks. ændre udfoldningsikonet).
  • $(this).parent('li').find('ul.children').first().toggleClass('visible'); og $(this).parent('li').find('ul.sub-menu').first().toggleClass('visible');: Disse linjer finder de direkte underliggende ul.children eller ul.sub-menu elementer og skifter klassen visible. Det er denne klasse, der sammen med CSS vil styre, om undermenuen skal vises eller skjules.
• iconFINAL = 'P'; $('body ul.etmobilemenu li.menu-item-has-children, ...').attr('data-icon', iconFINAL);: Denne del forbereder et data-attribut til CSS'en, der bruges til at vise det korrekte ikon. I dette tilfælde sættes det til 'P', som sandsynligvis refererer til et ikon i Divi's indbyggede ikonfont (ETModules).
• $('.mobile-toggle').on('mouseover', function() { ... }).on('mouseout', function() { ... });: Disse linjer håndterer hover-effekter for udfoldningsknappen ved at tilføje og fjerne klassen is-hover. Dette kan bruges af CSS til at give visuel feedback, når brugeren holder musen over knappen.

Hvor skal jQuery-koden placeres?

For at sikre, at denne kode kører korrekt på din Divi-drevne hjemmeside, har du et par muligheder:

1. I dit Divi child theme (anbefalet): Hvis du bruger et gratis Divi child theme (undertema), er det bedste sted at indsætte koden i scripts.js-filen. Husk at fjerne <script>-tags fra starten og slutningen, da filen allerede er en JavaScript-fil. At bruge et child theme er den bedste praksis, da det sikrer, at dine tilpasninger ikke overskrives, når Divi-temaet opdateres.
2. Via Divi Tema-indstillinger: Alternativt kan du placere koden i din Divi > Tema-indstillinger > Integrationsfane under "Tilføj kode til <head> af din blog"-kodeområdet. Her skal du inkludere <script>-tagsene. Dette er en hurtig løsning, men et child theme er at foretrække for langsigtet vedligeholdelse.

Tilføjelse af CSS for visuel forbedring og funktionalitet

Efter at have implementeret jQuery, skal vi nu anvende den tilsvarende CSS-kode. Denne CSS komplementerer jQuery-implementeringen og sikrer den ønskede kollapsede effekt for Divi mobilmenuen, samt styler de nye udfoldningsikoner og menupunkter.

Forståelse af CSS-koden:

Her er det CSS-kodeuddrag, du skal bruge, og en forklaring af dets funktion:

/* Changing hamburger icon to an "X" when the mobile menu is open */ #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before, .et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before { content: '\4d'; } /* Adjusting the newly added toggle element through jQuery */ ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ul.et_mobile_menu li.page_item_has_children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle { width: 44px; height: 100%; padding: 0px !important; max-height: 44px; border: none; position: absolute; right: 0px; top: 0px; z-index: 999; background-color: transparent; } /* Ensuring proper positioning of elements */ ul.et_mobile_menu>li.menu-item-has-children, ul.et_mobile_menu>li.page_item_has_children, ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children, .et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children, .et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children, .et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children { position: relative; } /* Removing default background color from menu items with submenus */ .et_mobile_menu .menu-item-has-children>a, .et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a { background-color: transparent; } /* Hiding submenus by default */ ul.et_mobile_menu .menu-item-has-children .sub-menu, #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu, .et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu, .et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu { display: none !important; visibility: hidden !important; } /* Showing submenus when toggled open */ ul.et_mobile_menu .menu-item-has-children .sub-menu.visible, #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible, .et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible, .et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible { display: block !important; visibility: visible !important; } /* Adjusting toggle icon position and transparency */ ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle { text-align: center; opacity: 1; } /* Styling the submenu toggle icon when closed */ ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after { top: 10px; position: relative; font-family: "ETModules"; content: '\33'; color: #00d263; background: #f0f3f6; border-radius: 50%; padding: 3px; } /* Styling the submenu toggle icon when open */ ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after { content: '\32'; } /* Adding a point on top of the menu submenu dropdown */ .et_pb_menu_0.et_pb_menu .et_mobile_menu:after { position: absolute; right: 5%; margin-left: -20px; top: -14px; width: 0; height: 0; content: ''; border-left: 20px solid transparent; } 

Lad os gennemgå de vigtigste CSS-regler og deres formål:

• Skift af hamburgerikon til "X": Den første blok CSS (#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before, ...) ændrer det standard hamburgerikon (tre streger) til et "X"-ikon, når mobilmenuen er åben. Dette giver en klar visuel indikation af, at menuen er åben og kan lukkes. \4d er Unicode-tegnet for "X" fra Divi's ikonfont.
• Justering af det nye toggle-element: Blokken for ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ... definerer stilen for den <a>-tag, der blev tilføjet med jQuery. Den placerer knappen absolut til højre for menupunktet, giver den en fast størrelse og fjerner unødvendige kanter og baggrundsfarver, så den fungerer som en diskret interaktiv knap.
• Sikring af korrekt elementpositionering: Reglerne for ul.et_mobile_menu>li.menu-item-has-children, ... sætter menupunkter med underpunkter til position: relative;. Dette er afgørende for, at position: absolute; på toggle-knappen fungerer korrekt i forhold til sit forældre-element.
• Fjernelse af standard baggrundsfarve:.et_mobile_menu .menu-item-has-children>a, ... fjerner standard baggrundsfarven fra menupunkter, der indeholder undermenuer. Dette er ofte nødvendigt for at undgå visuelle konflikter med det nye toggle-element.
• Skjul undermenuer som standard: Den mest kritiske del for den kollapsede funktionalitet er blokken, der starter med ul.et_mobile_menu .menu-item-has-children .sub-menu, .... Den sætter display: none !important; og visibility: hidden !important; på alle undermenuer. Dette sikrer, at de er skjult, når menuen indlæses, og at de kun vises, når de aktiveres af jQuery.
• Visning af undermenuer ved aktivering: Når jQuery tilføjer klassen .visible til en undermenu, overtager reglen for ul.et_mobile_menu .menu-item-has-children .sub-menu.visible, ... og ændrer display til block !important; og visibility til visible !important;. Dette gør undermenuen synlig.
• Justering af toggle-ikonets position og gennemsigtighed: Reglerne for ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ... justerer placeringen og synligheden af selve toggle-ikonet, der vises inde i den klikbare knap.
• Stil for udfoldningsikonet (lukket tilstand):ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after, ... definerer udseendet af udfoldningsikonet, når undermenuen er lukket. content: '\33'; henviser til et "plus"- eller "ned-pil"-lignende ikon fra Divi's ikonfont, og de øvrige regler styler ikonet med farve, baggrund og form.
• Stil for udfoldningsikonet (åben tilstand): Når klassen dt-open tilføjes af jQuery (når undermenuen er foldet ud), ændrer ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after, ... ikonet til content: '\32';, som typisk er et "minus"- eller "op-pil"-lignende ikon. Dette giver visuel feedback om menuens tilstand.
• Tilføjelse af en visuel pil øverst på dropdown: Den sidste blok .et_pb_menu_0.et_pb_menu .et_mobile_menu:after { ... } tilføjer en lille trekantet pil over mobilmenuen, som typisk peger nedad fra hamburgerikonet for at indikere menuens placering.

Hvor skal CSS-koden placeres?

Ligesom med jQuery-koden har du et par muligheder for placering:

1. I dit Divi child theme (anbefalet): Indsæt CSS-kodeuddraget i style.css-filen i dit Divi child theme. Dette er den mest vedligeholdelsesvenlige metode.
2. Via Divi Tema-indstillinger: Alternativt kan du inkludere koden i din Divi > Tema-indstillinger > Brugerdefineret CSS-kodeboks. Dette er en hurtig og nem løsning for mindre tilpasninger, men for en større mængde kode er et child theme at foretrække.

Trin-for-trin guide til opsætning af din foldbare mobilmenu

For at opsætte din foldbare Divi mobilmenu, følg disse enkle trin:

1. Forbered dit miljø: Sørg for, at du enten bruger et Divi child theme eller har adgang til Divi Tema-indstillingerne. Brug af et child theme er stærkt anbefalet for at undgå at miste dine tilpasninger ved fremtidige Divi-opdateringer.
2. Tilføj jQuery-koden:
   • Hvis du bruger et child theme: Åbn din scripts.js-fil (eller opret den, hvis den ikke findes i dit child theme-mappe) og indsæt jQuery-koden (uden <script>-tags).
   • Hvis du bruger Tema-indstillinger: Naviger til Divi > Tema-indstillinger > Integrationsfane. Indsæt jQuery-koden (med <script>-tags) i feltet "Tilføj kode til <head> af din blog".
   • Gem ændringerne.
3. Tilføj CSS-koden:
   • Hvis du bruger et child theme: Åbn din style.css-fil i dit child theme og indsæt al CSS-koden.
   • Hvis du bruger Tema-indstillinger: Naviger til Divi > Tema-indstillinger > Brugerdefineret CSS. Indsæt al CSS-koden her.
   • Gem ændringerne.
4. Test din mobilmenu: Åbn din hjemmeside på en mobil enhed eller brug browserens udviklerværktøjer (mobilvisning) for at teste din mobilmenu. Sørg for, at undermenuerne er skjult som standard, og at de foldes ud og ind korrekt, når du klikker på de nye toggle-ikoner. Kontroller også, at ikonerne skifter udseende som forventet.
5. Finjustering (valgfrit): Afhængigt af dit specifikke Divi-layout og andre tilpasninger, kan det være nødvendigt at foretage små justeringer i CSS'en (f.eks. farver, størrelser eller placering af ikoner) for at matche din hjemmesides design perfekt.

Fordele ved en optimeret mobilnavigation

Implementeringen af en foldbar mobilmenu går ud over blot æstetik; den har en direkte indvirkning på din hjemmesides ydeevne og succes. En optimeret mobilnavigation er afgørende i nutidens mobile-først verden. Her er nogle af de mest væsentlige fordele:

• Forbedret engagement: Når brugere nemt kan finde det, de søger, er de mere tilbøjelige til at udforske mere af din hjemmeside, interagere med dit indhold og i sidste ende konvertere (f.eks. foretage et køb, udfylde en formular eller tilmelde sig et nyhedsbrev).
• Reduceret afvisningsprocent: En frustrerende mobiloplevelse er en af de primære årsager til, at brugere hurtigt forlader en hjemmeside. En strømlinet, foldbar menu reducerer denne frustration og holder besøgende længere på din side.
• Øget konverteringsrate: Uanset om dit mål er salg, leads eller information, bidrager en gnidningsfri brugerrejse til højere konverteringsrater, da friktionen fjernes fra vejen til handling.
• Styrket brandopfattelse: En professionel og brugervenlig hjemmeside afspejler positivt på dit brand. Det viser, at du er moderne, teknisk kompetent og værdsætter dine kunders oplevelse.
• Bedre søgemaskineoptimering (SEO): Selvom det er indirekte, belønner søgemaskiner hjemmesider med god brugeroplevelse og mobilvenlighed. En lav afvisningsprocent og længere tid på siden kan signalere til søgemaskinerne, at din hjemmeside er relevant og værdifuld, hvilket potentielt kan forbedre dine placeringer i søgeresultaterne.

Ved at tage skridtet til at optimere din Divi mobilmenu, sikrer du, at din hjemmeside er fremtidssikret og klar til at imødekomme de krav, moderne internetbrugere stiller.

Ofte Stillede Spørgsmål (FAQ)

Spørgsmål: Vil denne løsning fungere med alle Divi-versioner?

Svar: Ja, denne metode er designet til at være kompatibel med de fleste nyere versioner af Divi-temaet, da den bygger på standard Divi-menu-strukturer og almindeligt anvendt jQuery og CSS. Det er dog altid en god idé at teste grundigt efter implementering, især hvis du har mange andre tilpasninger eller plugins, der påvirker menuen.

Spørgsmål: Skal jeg bruge et child theme for at implementere dette?

Svar: Det anbefales på det kraftigste at bruge et child theme. Hvis du tilføjer koden direkte til Divi-temaets filer eller via Tema-indstillinger uden et child theme, risikerer du, at dine ændringer bliver overskrevet, når Divi-temaet opdateres. Et child theme beskytter dine tilpasninger.

Spørgsmål: Hvad hvis jeg ikke kan se ikonerne, eller de ikke skifter?

Svar: Dobbelttjek, at du har kopieret både jQuery- og CSS-koden korrekt, og at de er placeret de rigtige steder (scripts.js for jQuery, style.css for CSS, eller de respektive felter i Divi Tema-indstillinger). Sørg for, at der ikke er typofejl i koden. Ryd din hjemmesides cache (hvis du bruger et caching-plugin) og din browsers cache. Hvis problemet fortsætter, kan der være en konflikt med et andet plugin eller en eksisterende tilpasning. Brug browserens udviklerværktøjer til at inspicere elementerne og se efter JavaScript-fejl i konsollen eller CSS-regler, der tilsidesætter dine egne.

Spørgsmål: Kan jeg ændre udseendet af udfoldningsikonerne?

Svar: Ja, absolut! I CSS-koden er der sektioner, der styrer stilen for .mobile-toggle::after. Du kan ændre content-værdien til et andet Unicode-tegn fra Divi's indbyggede ikonfont (ETModules) for at vælge et andet ikon. Du kan også justere color, background, border-radius, padding og andre CSS-egenskaber for at matche dit design. Du kan finde en liste over Divi ikoner og deres Unicode-værdier online.

Spørgsmål: Vil dette påvirke min desktop-menu?

Svar: Nej, denne løsning er specifikt målrettet Divi's mobilmenu (ved hjælp af selektorer som .et_mobile_menu) og vil ikke påvirke udseendet eller funktionaliteten af din desktop-menu. Den er designet til udelukkende at optimere mobiloplevelsen.

Spørgsmål: Jeg har en meget kompleks menustruktur. Vil dette stadig fungere?

Svar: Ja, løsningen er designet til at håndtere menupunkter med underpunkter på alle niveauer. Så længe dine menuer er korrekt oprettet i WordPress (Udseende > Menuer), hvor underpunkter er indrykket under deres forældre, vil denne kode identificere og kollapse dem. Vær dog opmærksom på, at ekstremt dybe menustrukturer (f.eks. mere end 3-4 niveauer dybt) kan blive svære at navigere på mobil, selv med en foldbar menu. Overvej at forenkle din menustruktur for den bedste UX.

At mestre kunsten at kollapse Divi mobilmenu undermenuer er afgørende for at skabe en problemfri mobilnavigation og en forbedret brugeroplevelse. Ved at implementere denne teknik kan du optimere din hjemmesides navigation på mobile enheder og sikre nem adgang til undermenuer uden at overvælde brugerne. Denne guide har givet dig de nødvendige værktøjer og den indsigt, der skal til for at implementere denne funktion effektivt. Gå ikke glip af muligheden for at give en brugervenlig mobiloplevelse – din hjemmeside og dine besøgende vil takke dig!

Hvis du vil læse andre artikler, der ligner Foldbare Divi Mobilmenuer: En Komplet Guide, kan du besøge kategorien Teknologi.