14/09/2022
I en verden, hvor mobilbrug dominerer internettrafikken, er en veloptimeret mobilmenu ikke længere en luksus, men en absolut nødvendighed. En rodet eller svær at navigere mobilmenu kan frustrere dine besøgende og få dem til at forlade din hjemmeside, før de overhovedet har fundet det, de leder efter. Heldigvis tilbyder Divi, et af de mest populære WordPress-temaer, fleksible løsninger til at skabe en kompakt og intuitiv mobiloplevelse. Denne artikel vil guide dig gennem forskellige metoder til at forvandle din Divi mobilmenu til en elegant og effektiv kollapsende liste, der forbedrer navigationen og den samlede brugeroplevelse på mindre skærme.
Ved at implementere en kompakt og letnavigerbar mobilmenu, sikrer du, at dine besøgende nemt kan finde det, de søger, uanset hvilken enhed de bruger. Dette er afgørende for både brugertilfredshed og din hjemmesides ydeevne i søgemaskinerne.
Divi's standard mobilmenu er funktionel, men for komplekse hjemmesider med mange sider og underkategorier kan den hurtigt blive uoverskuelig. En lang, rullende liste af menupunkter er ikke ideel på en lille skærm. Formålet med en kompakt mobilmenu er at spare plads, reducere visuel støj og præsentere indholdet på en logisk og tilgængelig måde. Dette opnås typisk ved at implementere kollapsende eller "accordion"-lignende funktioner for undermenuer, hvor de kun vises, når brugeren aktivt vælger at udvide dem.
En veldesignet mobilmenu bidrager direkte til en bedre brugeroplevelse (UX) og kan positivt påvirke din hjemmesides SEO, da søgemaskiner prioriterer mobilvenlige sider. Ved at gøre navigationen nemmere, opfordrer du besøgende til at udforske mere af dit indhold, hvilket potentielt kan føre til højere konverteringsrater og lavere afvisningsprocenter. En intuitiv menu mindsker "kognitiv belastning" for brugeren, hvilket betyder, at de ikke skal tænke så meget over, hvor de skal klikke, men i stedet kan fokusere på dit indhold.
Der er flere veje til at opnå en kompakt mobilmenu i Divi, afhængigt af dit tekniske niveau og de værktøjer, du allerede bruger. Her er de mest almindelige metoder, der kan hjælpe dig med at opnå en strømlinet mobilnavigation:
1. Brug af Divi Assistant Plugin
Hvis du allerede anvender Divi Assistant plugin'et, er processen yderst ligetil. Du skal blot indsætte den relevante jQuery-kode i den brugerdefinerede kodevindue under 'jQuery'-fanen i Divi Visual Builder. Dette plugin er designet til at strømline tilpasningsprocesser i Divi, hvilket gør det til en ideel løsning for dem, der foretrækker en nem og integreret tilgang. Divi Assistant centraliserer mange tilpasningsmuligheder, hvilket gør det lettere at administrere din hjemmesides udseende og funktionalitet uden at skulle navigere rundt i flere menuer.
2. Via et Child Theme (Undertema)
En mere robust og fremtidssikret metode er at bruge et Child Theme. Hvis du har et Child Theme, kan du indsætte JavaScript-koden direkte i din scripts.js-fil. Husk at fjerne <script>-tags i starten og slutningen af koden, da filen allerede er en JavaScript-fil. Hvis du ikke har et Child Theme, kan du nemt generere et direkte på din hjemmeside eller downloade et gratis Child Theme. Fordelen ved et Child Theme er, at dine tilpasninger forbliver intakte, selv efter Divi-temaopdateringer, hvilket forhindrer potentielle kodekonflikter og tab af ændringer. Dette er den anbefalede metode for udviklere og brugere, der planlægger omfattende tilpasninger.
3. Direkte i Divi Tema Indstillinger (Integrations)
Den tredje metode involverer Divi's indbyggede temaoptioner. Du kan indsætte koden direkte i Divi > Tema Indstillinger > Integrations-fanen i kodeområdet "Tilføj kode til <head> på din blog". Denne metode er hurtig og kræver ingen yderligere plugins eller et Child Theme, men det er vigtigt at være opmærksom på, at denne placering er mest egnet til mindre mængder kode. For større kodeblokke eller komplekse scripts kan et Child Theme være en bedre løsning for at holde din kode organiseret og vedligeholdelig. Denne metode er ideel for hurtige, engangsændringer, der ikke kræver løbende vedligeholdelse.
Uanset hvilken metode du vælger, er det afgørende at forstå, hvor koden skal placeres korrekt for at sikre, at dine ændringer anvendes effektivt. Divi's fleksibilitet giver dig magten til at tilpasse din hjemmeside præcis efter dine behov og skabe en mobiloplevelse, der skiller sig ud.
Sammenligning af Implementeringsmetoder
| Metode | Fordele | Ulemper | Kompleksitet |
|---|---|---|---|
| Divi Assistant | Meget nem at bruge; integreret i Divi Visual Builder; centraliseret tilpasning. | Kræver et ekstra plugin; afhængighed af plugin'et for funktionalitet. | Lav |
| Child Theme | Fremtidssikret; kode forbliver intakt ved temaopdateringer; god praksis for skalerbarhed; organiseret kode. | Kræver opsætning af Child Theme (hvis ikke eksisterende); lettere teknisk forståelse påkrævet. | Mellem |
| Divi Tema Indstillinger | Hurtig og nem at implementere; ingen ekstra filer eller plugins; direkte adgang. | Mindre organiseret for store mængder kode; potentielt sårbar over for temaopdateringer (selvom sjældent); ingen versionskontrol. | Lav-Mellem |
At skabe en brugervenlig mobilmenu, der kollapser for at spare plads, samtidig med at forældrelinks forbliver aktive, er afgørende for at forbedre navigationen og brugeroplevelsen på mindre skærme. Her er en detaljeret guide til at implementere en kollapsende undermenu i Divi ved hjælp af kode, eller en enklere plugin-løsning:
Trin 1: Tilføj CSS-kode til det Brugerdefinerede CSS-område
Gå til WordPress Dashboard → Divi → Tema Indstillinger → Generel fane → Brugerdefineret CSS. Indsæt følgende CSS-kode. Denne kode styler ikonerne, skjuler undermenuerne som standard og viser dem kun, når de udvides. Den sørger også for korrekt placering af toggle-ikonerne og sikrer, at forældrelinks fungerer, selvom de har en kollapsende funktion. CSS'en definerer udseendet og den indledende tilstand af din menu.
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; position: absolute; right: 0px; top: 0px; z-index: 999; background-color: transparent; border-bottom: 0; text-align: center;}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;}.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;}/* Hide the Sub-menu */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;}/* Show the sub-menu when the + icon is clicked */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;}/* Create the opening/closing icon using the SVG Icons */ul.et_mobile_menu li.menu-item-has-children .mobile-toggle .dt-icons,.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle .dt-icons { top: 10px; position: relative;}/* Hide the closing icon if the sub-menu is not open */ul.et_mobile_menu li.menu-item-has-children:not(.dt-open) .mobile-toggle .dt-close-icon,.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children:not(.dt-open) .mobile-toggle .dt-close-icon { display: none;}/* Hide the opening icon if the sub-menu is open */ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle .dt-open-icon,.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle .dt-open-icon { display: none;}Trin 2: Tilføj JavaScript-kode til Integration-fanen
Gå til WordPress Dashboard → Divi → Tema Indstillinger → Integration-fane → Header. Indsæt følgende JavaScript-kode. Dette script tilføjer toggle-ikonerne (+/-) til menupunkter med undermenuer og håndterer klikbegivenhederne, så undermenuerne kan udvides og kollapses dynamisk. Det er vigtigt, at dette script placeres korrekt, da det er ansvarligt for funktionaliteten af de kollapsende elementer. Uden JavaScript vil CSS'en kun forberede elementerne, men ikke give dem interaktivitet.
<script id="dt-collapsable-menu-items">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( '<span class="mobile-toggle no-smooth-scroll" aria-label="toggle sub menu"><svg class="dt-icons dt-open-icon" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg><svg class="dt-icons dt-close-icon" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg></span>', ); $('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(); event.stopPropagation(); $(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'); }); $('.mobile-toggle') .on('mouseover', function () { $(this).parent().addClass('is-hover'); }) .on('mouseout', function () { $(this).parent().removeClass('is-hover'); }); });});</script>Alternativ: Brug af WordPress Plugin
Hvis du foretrækker en løsning uden at kopiere og indsætte kode, kan du downloade Divi Collapsible Menu plugin'et. Når plugin'et er downloadet, installeres det nemt fra WordPress Dashboard → Plugins → Tilføj nyt plugin. Bemærk, at hvis du bruger plugin'et, er de ovenstående CSS- og JS-koder ikke nødvendige, da plugin'et håndterer al funktionalitet for dig. Denne metode er ideel for brugere, der ønsker en "plug-and-play" løsning og ikke er komfortable med at redigere kode direkte.
At gøre undermenuer kollapsende i din burgermenu er en effektiv måde at holde lange mobilmenuer rene og responsive. Dette gælder både for Divi's menumodul og den standard Divi-header, hvilket sikrer konsistent funktionalitet på tværs af din hjemmeside.
Kode Snippet Metode (for avancerede brugere)
Den kode, der er beskrevet i afsnittet ovenfor, er designet til at give dig fuld kontrol over funktionaliteten af dine kollapsende undermenuer. Ved at indsætte de specifikke CSS- og JavaScript-snippets, kan du opnå den ønskede effekt, hvor undermenuerne kun vises, når de aktiveres af brugeren. Dette kræver en grundlæggende forståelse for, hvordan man arbejder med kode i WordPress, men giver maksimal fleksibilitet i design og funktionalitet. Denne metode giver dig mulighed for at finjustere menuens adfærd præcist efter dine behov.
Divi Switch Plugin (for begyndere)
For dem, der foretrækker en no-code tilgang, er Divi Switch Plugin et fremragende alternativ. Dette plugin giver dig mulighed for at oprette kollapsende undermenuer i burgermenuen på mobilen med et enkelt klik på en kontakt. Det er en ideel løsning for begyndere og dem, der ønsker at spare tid på kodning, da det tilbyder en bred vifte af Divi-tilpasninger lige ved hånden. Divi Switch er en omfattende værktøjskasse, der simplificerer mange almindelige Divi-tilpasninger, herunder mobilmenuer.
Udover den standard lodrette "udvid/kollaps"-stil, tilbyder nogle løsninger og plugins også en mere dynamisk "slide"-stil for mobilmenuer. Dette kan give en mere moderne og flydende brugeroplevelse, der efterligner den navigation, man ser i mange native mobilapps.
Hvad er "Slide" stil?
Indstillingen for kollapsende undermenuer i f.eks. Divi MadMenu's mobilmenuelement gør mobilmenuens undermenuer kollapsende, så brugeren kan skifte undermenuerne ved at klikke på forældremenupunktet eller dets pil (afhængigt af "Parent Links Clickable"-indstillingen). Denne funktion er især nyttig for komplekse mobilmenuer med mange undermenupunkter eller -niveauer, som ikke passer på små mobile enheders skærme. Det reducerer den vertikale plads, menuen optager, og skaber en dyb, men organiseret struktur.
"Expand" vs. "Slide undermenuer" Stilarter
Standardstilen for kollapsede undermenuer er "Expand"-stilen, der tillader lodret udvidelse/kollaps af undermenuer. Dette er den mest almindelige form for kollapsende menu og er velegnet til de fleste hjemmesider.
Alternativt gør "Slide"-undermenuens stil (tilgængelig i visse plugins som Divi MadMenu siden v1.8.0) de kollapsede mobilundermenuer til at glide ind fra venstre eller højre i stedet for at udvide/kollapse lodret. Der er to slide-muligheder: "Slide Right" og "Slide Left". Højden af mobilmenuen vil justeres afhængigt af højden af den aktuelt synlige undermenu, medmindre mobilmenuens højde er blevet fastsat. Hvis menuens højde er fastsat, og indholdet overstiger denne højde, vil menuen blive lodret scrollbar. "Slide"-stilen giver en fornemmelse af at bevæge sig dybere ind i menuen, hvilket kan være meget intuitivt.
Akkordeon-tilstand
Hvis "Collapse Submenus" er aktiveret, kan "Accordion Mode"-indstillingen (kun tilgængelig for "Expand"-stilen) få den tidligere udvidede undermenu til at lukke, når en anden undermenu på samme niveau er blevet klikket for at udvide. Dette hjælper med at holde mobilmenuen mere kompakt, da kun én undermenu er udvidet ad gangen, hvilket forhindrer en uoverskuelig liste af åbne undermenuer.
"Slide" undermenuens header-elementer
Slide undermenuer har en header, der typisk indeholder en "Tilbage"-knap for at gå ét niveau tilbage, en "Hjem"-knap for at gå helt tilbage til hovedmenuen, samt en etiket for undermenuens header. Disse elementer forbedrer navigationen markant i en "slide"-baseret menu, da de giver klare navigationspunkter og en følelse af kontrol til brugeren.
Tilpasning af "Slide" undermenuens header-tekst/etiket
Ved at vælge en af "Slide"-mulighederne for de kollapsede undermenuer, får du ofte mulighed for at tilføje tekst (etiket) til undermenuens header. Dette kan gøres på tre forskellige måder:
- Parent Item Text: Forældreelementets tekst bruges som undermenuens header-etiket, hvilket skaber en logisk sammenhæng.
- Custom Text: Tillader brug af brugerdefineret tekst for undermenuens headers, hvilket giver fuld kontrol over sprog og branding.
- No Text: Vælg denne mulighed, hvis du ikke ønsker at tilføje en etiket til undermenuens header, for en minimalistisk tilgang.
Yderligere tilpasning af headerens design kan ofte opnås via brugerdefinerede CSS-felter, der findes i avancerede indstillinger for plugins som MadMenu, så du kan matche headeren med din hjemmesides overordnede design.
Gør forældrelinks klikbare
Som standard er "Parent Links Clickable"-indstillingen deaktiveret, hvilket gør forældrelinks deaktiverede, og et klik på forældreelementet skifter blot undermenuen. Men hvis du har brug for, at undermenuerne skal være kollapsende, men forældrelinks stadig skal være klikbare, skal du blot aktivere "Parent Links Clickable"-indstillingen. Dette vil få et klik på forældreelementets pil til at skifte undermenuen, mens et klik på forældreelementets link vil omdirigere brugeren til den linkede side. Denne fleksibilitet er afgørende for at skabe en menu, der passer til dine specifikke navigationsbehov og brugernes forventninger.
Hvorfor skal jeg have en kompakt mobilmenu?
En kompakt mobilmenu forbedrer brugeroplevelsen på små skærme ved at reducere rod, spare plads og gøre navigationen mere intuitiv. Det mindsker sandsynligheden for, at brugere forlader din side på grund af en frustrerende menu, og kan også forbedre din SEO, da søgemaskiner favoriserer mobilvenlige sider. Det bidrager til en professionel og brugervenlig fremtoning af din hjemmeside.
Skal jeg bruge et plugin for at opnå en kollapsende menu?
Nej, det er ikke et krav. Du kan opnå en kollapsende menu ved at indsætte CSS- og JavaScript-kode direkte i Divi's tema indstillinger eller via et Child Theme. Et plugin som Divi Collapsible Menu eller Divi Switch kan dog forenkle processen betydeligt for dem, der foretrækker en no-code løsning og ønsker en hurtig implementering.
Vil mine ændringer forsvinde ved Divi-temaopdateringer?
Hvis du indsætter koden direkte i Divi Tema Indstillinger, er der en lille risiko for, at ændringer kan blive påvirket af større temaopdateringer, selvom det er sjældent. Ved at bruge et Child Theme sikrer du, at dine tilpasninger forbliver intakte uafhængigt af Divi's opdateringer, hvilket er den mest anbefalede metode for langvarige tilpasninger og for at undgå uforudsete problemer.
Kan jeg tilpasse udseendet af min kollapsende menu?
Ja, CSS-koden giver dig en grundlæggende styling. Du kan yderligere tilpasse farver, skrifttyper, afstand og ikoner ved at ændre den eksisterende CSS eller tilføje mere brugerdefineret CSS i Divi's tema indstillinger eller dit Child Theme. Plugins tilbyder ofte også designindstillinger via deres brugerflade, hvilket gør det nemt at matche din menu med dit brand.
Hvad er forskellen på "Expand" og "Slide" undermenuer?
"Expand" undermenuer udvides lodret under forældrepunktet, hvilket er den traditionelle måde. "Slide" undermenuer glider derimod ind fra siden (venstre eller højre) og ofte dækker den tidligere visning, hvilket giver en mere app-lignende oplevelse. "Slide" menuer har typisk også en header med tilbage- og hjem-knapper, der forbedrer navigationen i dybere menuniveauer.
Hvordan gør jeg forældrelinks klikbare, hvis de også kollapser en undermenu?
Mange implementeringer af kollapsende menuer, især via plugins eller mere avancerede kode-snippets, tilbyder en indstilling til at gøre forældrelinks klikbare. Dette gøres typisk ved at lade selve linket navigere til siden, mens et separat ikon (f.eks. en pil eller et plus/minus-tegn) ved siden af linket håndterer udvidelsen/kollapsen af undermenuen. Dette giver brugeren fleksibilitet til enten at gå til forældresiden eller udforske undermenuen.
Konklusion
At optimere din Divi mobilmenu til en kompakt og effektiv løsning er en investering i din hjemmesides brugervenlighed og succes. Uanset om du vælger at dykke ned i kode med CSS og JavaScript, udnytte et robust Child Theme, eller foretrækker den bekvemmelighed, et dedikeret plugin tilbyder, er målet det samme: at give dine besøgende en problemfri og behagelig oplevelse på alle enheder. Ved at implementere kollapsende eller Slide undermenuer, skaber du en renere, mere intuitiv navigation, der ikke kun ser professionel ud, men også opfordrer til dybere interaktion med dit indhold. Tag skridtet i dag og forvandl din Divi mobilmenu til en sand styrke, der forbedrer både æstetik og funktionalitet på din hjemmeside!
Hvis du vil læse andre artikler, der ligner Optimer Din Divi Mobilmenu: Kompakt & Brugervenlig, kan du besøge kategorien Mobil.