08/03/2023
I en verden, hvor mobiltelefonen er blevet vores primære adgang til internettet, er en velfungerende og intuitiv mobilmenu ikke længere en luksus, men en absolut nødvendighed for enhver hjemmeside. For brugere af Joomla CMS er der heldigvis mange måder at sikre, at navigationen er optimeret til små skærme. Denne artikel dykker ned i, hvordan du kan oprette, tilpasse og implementere effektive mobilmenuer i din Joomla-installation, uanset om du foretrækker de indbyggede funktioner eller kraftfulde tredjepartsudvidelser.
En mobilmenu i Joomla adskiller sig fra den traditionelle desktop-menu ved, at den er designet specifikt til at være tilgængelig og brugbar på mobile enheder. Dette betyder ofte en mere kompakt visning, som typisk foldes ud, når brugeren klikker på et ikon (ofte et ‘hamburger’-ikon), hvilket sparer plads på skærmen og forbedrer den samlede brugeroplevelse.
En mobilmenu i Joomla er i bund og grund en Joomla-menu, der er konfigureret til kun at blive vist på den mobile version af dit website. Dette giver dig fleksibiliteten til at have en simplificeret eller anderledes navigationsstruktur for mobile brugere, uden at det påvirker desktop-oplevelsen. Forestil dig at have en lang, detaljeret menu på din desktop-side, men kun de mest essentielle links tilgængelige hurtigt på en smartphone. Dette er præcis, hvad en dedikeret mobilmenu kan opnå.
At omdanne en web-specifik menu til en mobilvenlig menu eller oprette en helt ny mobilmenu er en ligetil proces i Joomla. Følg disse trin for at komme i gang:
- Gå til Joomla! Administration: Log ind på dit Joomla-kontrolpanel.
- Naviger til Menu Manager: Find og klik på ‘Menupunktshåndtering’ (Menu Manager) i din administrationsmenu.
- Opret en ny mobilmenu: Klik på knappen “Ny” for at oprette en ny menu. Her skal du udfylde felterne ‘Titel’ og ‘Menutype’. For eksempel kan du bruge “Mobil Menu” som titel og “mobilmenu” som menutype. Klik derefter på ‘Gem’.
- Tilføj menupunkter til den nye menu: Nu skal du tilføje de menupunkter, du ønsker skal vises i din mobilmenu. Det anbefales på det kraftigste at bruge typen “Systemlinks / Menu Item Alias” til at udfylde mobilmenuen med aliaser til eksisterende (desktop) menupunkter. Dette sikrer, at du ikke duplikerer indhold, men i stedet refererer til de samme sider, hvilket gør vedligeholdelsen lettere.
Når din mobilmenu er oprettet, skal den tildeles som hovedmenuen for den mobile version af dit website. Dette gøres via Modulhåndteringen:
- Gå til Udvidelser → Modulhåndtering: I dit Joomla-kontrolpanel, naviger til ‘Udvidelser’ og derefter ‘Modulhåndtering’.
- Filtrer og vælg eksisterende mobilmenumodul: Du kan finde eksisterende mobilmenumoduler ved at se efter positionen ‘mj_panel’. Vælg det relevante modul. Det er her, du konfigurerer, hvilken menu der skal vises som hovedmenuen for din mobile side.
Mens Joomla har indbyggede funktioner, kan tredjepartsudvidelser tilbyde avanceret funktionalitet og mere dybdegående tilpasningsmuligheder. Her er et kig på nogle af de mest populære:
Mobile Menu CK er en kraftfuld udvidelse, der gør styling af din mobilmenu utrolig nem. Du behøver ikke at være en CSS-ekspert for at skabe et design, der passer til din hjemmeside. Mobile Menu CK tilbyder en komplet og brugervenlig grænseflade, der giver dig mulighed for at style dit menumodul direkte fra modulindstillingerne. Du behøver ikke at skifte til en anden skærm; du gemmer blot din stil, og den anvendes øjeblikkeligt.
For udviklere er der yderligere fleksibilitet, da Mobile Menu CK understøtter CSS override-teknikken, så du automatisk kan indlæse dit eget tema fra skabelonen. Dette giver fuld kontrol over designet, hvis du ønsker at implementere specifikke tilpasninger, der går ud over de indbyggede muligheder.
JF Mobile Menu er en gratis multi-level push menu-modul til Joomla, der også fungerer glimrende på desktops. En af hovedfunktionerne er muligheden for at anvende Font-Awesome ikoner eller brugerdefinerede billeder til dine valgte menupunkter. Modulets farvestyling er fuldt redigerbar via Modulhåndteringen, hvilket giver dig rig mulighed for at tilpasse udseendet, så det matcher dit websites brand.
Lad os gennemgå, hvordan dette modul fungerer:
- Trin 1. Download & Installer JF Mobile Menu: Du kan downloade JF Mobile Menu fra Joomlashack's hjemmeside. Det kræver typisk, at du opretter en gratis konto og logger ind for at få adgang til downloadlinket. Installer det derefter via 'Udvidelser > Håndter > Installer' i Joomla.
- Trin 2. Opret et JF Mobile Menu Modul: Gå til 'Udvidelser > Moduler > Ny > JF Mobile Menu'. Vælg en modulposition. ‘Debug’ er ofte en anbefalet position, hvis den er tilgængelig i din skabelon, da den ofte er fri for andre elementer. Sæt ‘Vis titel’ til ‘Skjul’.
- Trin 3. Vælg din ønskede menu: JF Mobile Menu-modulet fungerer på samme måde som det native Joomla Menu-modul. Ved at vælge din ønskede menu vil modulet automatisk vise en multi-level sidebar push menu på frontend. Vigtigt: I din menuhåndtering skal forældremenupunkternes type være en ‘Tekstseparator’, hvis du ønsker, at disse skal vise deres respektive undermenupunkter med et klik. Hvis forældremenupunktet er en anden type end ‘Tekstseparator’, vil det ved klik blot navigere din webbrowser til den relevante webside. Dette er afgørende for den “glidende effekt”, hvor undermenuer elegant foldes ud.
- Trin 4. Aktiver Font-Awesome Ikoner: ‘JF Mobile Menu’-modulet kræver Font Awesome-ikoner. Hvis din Joomla-skabelon ikke allerede indlæser det, skal du aktivere det ved at sætte ‘Font Awesome’ til ‘Ja’ i modulindstillingerne.
- Trin 5. Vælg på hvilken enhed modulet skal vises: JF Mobile Menu kan være synligt på alle enheder: desktops, tablets og mobiler. Modulet bruger de velkendte “CSS3 Media Queries” til at gøre det synligt på de enheder, du ønsker. Dette giver dig finmasket kontrol over, hvornår menuen skal dukke op.
- Trin 6. Vælg Ikoner eller Billeder til dine menupunkter: En af hovedfunktionerne ved JF Mobile Menu er, at du kan vælge et hvilket som helst menupunkt og anvende brugerdefinerede ikoner eller billeder til det. Du skal blot vælge dit ønskede menupunkt og indtaste en “Font-Awesome CSS-klasse” eller uploade et “Brugerdefineret billede”.
- Trin 7. Tilpas Farverne for din menu: Som nævnt er menustyling fuldt redigerbar; du kan ændre farver og få den til at passe til din hjemmesides brand. Dette omfatter baggrundsfarver, tekstfarver, hover-farver og meget mere, alt sammen justerbart direkte fra modulindstillingerne.
Joomla tilbyder en række muligheder for at forbedre dine menuer, hver især tilpasset specifikke behov. Udover de standardindbyggede funktioner og de gratis udvidelser som JF Mobile Menu, findes der også mere avancerede løsninger som Maxi Menu CK, der er kendt som et “feature-powerhouse” for kræsne brugere, og specialiserede menuer som Jelly Side Menu fra PulseExtensions.
Megamenu er en fremhævet funktion i T3 Framework, der tilbyder en visuel konfiguration, hvor det, du konfigurerer, er det, du ser på forsiden. Dette gør det nemt at konfigurere, selv for komplekse menustrukturer. Med Megamenu kan du bygge omfattende og visuelt tiltalende dropdown-menuer, der kan indeholde moduler, billeder og flere kolonner.
En vigtig overvejelse er valget mellem Megamenu og standard Joomla-menuen. På ét site kan du bruge den standard Joomla-menu i én skabelonstil og bruge Megamenu i andre skabelonstile. I hver skabelonstil kan du konfigurere, hvilket menussystem den bruger. Hvis du deaktiverer Megamenu-funktionen, vil skabelonstilen derefter bruge den standard Joomla-menu (dropdown-menu).
Sådan aktiveres og konfigureres Megamenu:
- Aktiver Megamenu: Åbn den skabelonstil, du vil aktivere Megamenu i, gå til fanen ‘Navigation’ og aktiver derefter ‘Megamenu’-indstillingen.
- Konfigurer Megamenu: Megamenu-konfigurationen er en global indstilling, så den er den samme for alle skabelonstile. Øverst i skabelonstilen skal du klikke på knappen ‘Megamenu’.
- Vælg menu, der skal vises på forsiden: Du kan vælge enhver menu til at konfigurere for Megamenu. Men det er ikke den menu, der skal vises på din forside. Menuen, der skal vises på din forside, er den menu, du tildeler i indstillingerne for skabelonstilen under fanen ‘Navigation’.
Megamenu konfigurationsniveauer:
Der er 3 konfigurationsniveauer i Megamenu, som giver dig detaljeret kontrol over din menu:
- Menupunktkonfiguration: Indstillingen for menupunkt giver dig mulighed for at aktivere/deaktivere dets undermenu, tilføje ekstra CSS-klasse for at style menupunktet, tilføje ikon og billedtekst til menupunktet.
- Undermenu-konfiguration: Undermenu-konfigurationen giver dig mulighed for at tilføje/slette en række under undermenuen, vise eller skjule undermenuen på små skærme som mobil, justere undermenuen til venstre, højre, midten eller gøre den ‘justify’, tilføje ekstra CSS-klasse for at style undermenuen. Dette er særligt vigtigt for den mobile oplevelse, da det giver dig mulighed for at kontrollere synlighed og layout på forskellige skærmstørrelser.
- Kolonnekonfiguration: Du kan tilføje/fjerne en kolonne, vise eller skjule kolonnen på små skærme som mobil, indstille breddestørrelsen på kolonnen, tildele et modul, hvis det er en modulmenu, og tilføje ekstra CSS-klasse for at style kolonnen.
For at opnå en Megamenu, der ligner en demo (f.eks. Purity III), kan du følge disse trin:
- Trin 1: Aktiver ‘Gruppe’-indstilling for menu: Vælg først menupunktet og aktiver derefter ‘Gruppe’-indstillingen, som vil gruppere undermenupunkter under et forældremenupunkt.
- Trin 2: Skift undermenustørrelse: Vælg den undermenu, du skal ændre størrelsen på, og udfyld derefter din ønskede bredde.
- Trin 3: Flyt menu til ny kolonne: Vælg menupunktet og flyt det til højre kolonne ved hjælp af ‘Position’-knappen på konfigurationslinjen.
- Trin 4: Opret ny modulkolonne: For at oprette en ny modulkolonne skal du vælge en eksisterende kolonne og derefter klikke på ‘+’-knappen på konfigurationslinjen. Du kan derefter tildele indhold – ethvert modul – til den nyoprettede modulkolonne.
- Trin 5: Skift kolonnestørrelse: Du kan ændre breddestørrelsen på hver kolonne for at justere din Megamenu baseret på det viste indhold.
Styling, ikoner og elementtekst i Megamenu:
Du kan style Megamenu fra menupunkt, undermenu og kolonne ved at tilføje en stilklasse til feltet ‘Ekstra Klasse’. Dette giver dig fuld kontrol over udseendet. Du kan også tilføje ikoner til ethvert menupunkt i din Megamenu, enten standard Bootstrap 3-ikoner, Font Awesome 3-ikoner eller dine egne styled ikoner. Desuden kan du tilføje billedtekster til menupunkter, selvom nogle skabeloner muligvis ikke har standardstil for dette, kan du altid tilpasse din ønskede stil for Megamenu.
Megamenu understøtter også en række animationstyper. For at konfigurere denne funktion skal du åbne enhver skabelonstil, gå til fanen ‘Navigation’ og derefter vælge din animationstype og varighed. Dette kan tilføje et dynamisk og professionelt præg til din menu.
Bemærk, at Megamenu også understøtter flersprogede sider og flere instanser, hvilket gør det muligt at bygge komplekse, men velorganiserede, globale websites.
Ofte Stillede Spørgsmål (FAQ)
Valget af den “bedste” udvidelse afhænger af dine specifikke behov. Maxi Menu CK er kendt som et “feature-powerhouse” for avancerede brugere, der ønsker omfattende tilpasningsmuligheder. JF Mobile Menu er et fremragende gratis valg, der tilbyder multi-level push-menuer og nem ikontilføjelse. For enklere behov kan de indbyggede Joomla-funktioner være tilstrækkelige.
Ja, du kan. Du kan oprette et alias til dine eksisterende desktop-menupunkter, når du opretter din mobilmenu. Dette sparer tid og sikrer konsistens, da du ikke behøver at oprette alle links fra bunden igen. Det er en smart måde at genbruge indhold på tværs af forskellige visninger.
Ikke nødvendigvis. Mange moderne Joomla-udvidelser som Mobile Menu CK tilbyder brugervenlige grænseflader, der lader dig style din menu direkte fra modulindstillingerne uden at skulle skrive en eneste linje CSS. Dog giver viden om CSS dig større fleksibilitet og mulighed for dybere tilpasninger, ofte via en CSS override-teknik.
Udvidelsesmoduler som JF Mobile Menu giver dig mulighed for nemt at tilføje ikoner. Du kan enten vælge at bruge Font-Awesome ikoner ved at aktivere Font Awesome-biblioteket og indtaste den relevante CSS-klasse, eller du kan uploade dine egne brugerdefinerede billeder som ikoner. Dette forbedrer den visuelle navigation og gør menupunkterne mere genkendelige.
Ja, mange mobilmenu-udvidelser, herunder JF Mobile Menu, er designet til at være responsive og kan fungere lige så godt på desktop- og tablet-enheder som på mobiltelefoner. De bruger ofte CSS3 Media Queries til at tilpasse visningen baseret på skærmstørrelsen, hvilket sikrer en optimal oplevelse på tværs af alle enheder.
Konklusion
At skabe en effektiv mobilmenu i Joomla er en fundamental del af at levere en god brugeroplevelse i dagens digitale landskab. Uanset om du vælger at udnytte Joomlas indbyggede menufunktioner, benytte dig af gratis udvidelser som JF Mobile Menu, eller investere i kraftfulde løsninger som Maxi Menu CK og Megamenu, er mulighederne mange. Ved at følge de skitserede trin og forstå de forskellige systemers fordele kan du sikre, at din hjemmeside altid præsenterer en intuitiv og tilgængelig navigation for alle dine besøgende, uanset hvilken enhed de bruger.
Hvis du vil læse andre artikler, der ligner Skab Effektive Mobilmenuer i Joomla!, kan du besøge kategorien Mobil.