01/01/2022
I en verden hvor brugeroplevelsen er altafgørende, spiller navigationen på en hjemmeside en central rolle. For webudviklere, især dem der arbejder med frameworks som Bootstrap, er evnen til at skabe intuitive og visuelt tiltalende menuer en konstant udfordring. Dette er især relevant, når det kommer til multilevel menuer, også kendt som undermenuer eller dropdown-menuer, der tillader en hierarkisk organisering af indhold. Mange undrer sig over, hvorvidt Bootstrap 3, en af de mest populære versioner af frameworket, understøtter disse komplekse menustrukturer ud af boksen. Svaret er både ja og nej. Mens Bootstrap 3 ikke tilbyder en indbygget løsning specifikt til avancerede multilevel menuer, er det absolut muligt at opnå dette med den rette tilgang, herunder brug af CSS og JavaScript.
I denne artikel vil vi dykke ned i, hvordan man kan implementere og optimere multilevel menuer i Bootstrap 3. Vi vil se på de udfordringer, der kan opstå, og hvordan man overkommer dem, samt introducere koncepter som megamenus og deres relevans i moderne webdesign. Vi vil også berøre, hvordan nyere temaer og moduler, som eksempelvis det nyligt opdaterede Glazed tema, tackler disse udfordringer og tilbyder avancerede løsninger uden behov for yderligere moduler.
Bootstrap 3 tilbyder en robust og fleksibel grundstruktur til at bygge navigationsmenuer. Standard navbar-komponenten i Bootstrap 3 gør det nemt at skabe simple horisontale eller vertikale menuer med dropdown-funktionalitet. Ved at anvende specifikke HTML-klasser som .navbar, .navbar-nav, .dropdown og .dropdown-menu kan udviklere hurtigt sammensætte en funktionel menu. For at skabe et enkelt undermenu-niveau, placeres en liste med links inden i en <li>-element, der har klassen .dropdown. En <ul> med klassen .dropdown-menu indeholder derefter de elementer, der skal vises i dropdown'en.
Problemet opstår, når man ønsker at gå et niveau dybere, altså at have dropdowns inden i andre dropdowns – en sand multilevel menu. Bootstrap 3's standardklasser er ikke designet til at håndtere disse indlejrede strukturer automatisk med den ønskede visuelle præsentation. Når man forsøger at indlejre en .dropdown inden i en anden .dropdown, vil den indre dropdown typisk ikke blive vist korrekt, eller den vil kræve yderligere styling for at fungere som tiltænkt.
For at realisere fuld multilevel funktionalitet i Bootstrap 3, er der behov for at supplere med brugerdefineret CSS og potentielt JavaScript (jQuery). Grundlæggende kan man opnå synlighed for indlejrede menuer ved at justere CSS-egenskaberne. En almindelig metode er at ændre display-egenskaben for de indlejrede dropdown-menuer fra none til block eller flex, når den ydre menu er aktiv. Dette kan gøres ved at udnytte Bootstrap's egne "open" eller "show" klasser, eller ved at definere egne selektorer.
For at opnå en mere avanceret præsentation, som f.eks. at opdele dropdowns i kolonner eller skabe mere dynamiske overgange, er jQuery ofte nødvendigt. jQuery kan bruges til at manipulere DOM'en, tilføje og fjerne klasser baseret på brugerinteraktion, og dermed styre visningen af menuerne. Et eksempel på dette er at opdele en dropdown med mange menupunkter i flere kolonner for at forbedre læsbarheden, især på større skærme.
Eksempel på CSS for indlejrede dropdowns:
.dropdown-menu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } .dropdown-menu .dropdown { position: relative; } .dropdown-menu .dropdown-toggle[data-toggle="dropdown"] { width: 100%; text-align: left; } .dropdown-menu .dropdown-menu .dropdown-toggle[data-toggle="dropdown"] { border-bottom: 1px solid #eee; } .dropdown-menu .dropdown-menu .dropdown-menu { left: auto; right: 100%; top: 0; } Disse CSS-regler sikrer, at indlejrede dropdowns placeres korrekt ved siden af deres forældreelementer og forbliver synlige, når forældremenuen aktiveres. Det er vigtigt at bemærke, at disse løsninger kan variere afhængigt af den specifikke Bootstrap-version og andre CSS-rammeværk, der måtte være i brug.
Begrebet megamenus refererer til store dropdown-menuer, der ofte indeholder flere kolonner med links, billeder eller andre elementer. Disse er særligt effektive på websites med en stor mængde indhold og en kompleks struktur, hvor traditionelle dropdowns kan blive uoverskuelige. Mens nogle eksperter anser megamenus for at være et potentielt forældet designmønster, især på mobile enheder, kan de stadig være yderst nyttige, når de implementeres korrekt.
En af de store fordele ved megamenus er muligheden for at organisere indholdet på en meget struktureret måde. Hvis en dropdown indeholder mere end et bestemt antal listeelementer (f.eks. 7), kan det være fordelagtigt at opdele menuen i lige store kolonner. Ligeledes, hvis en menu har 3 eller flere niveauer, kan dette naturligt føre til en kolonnebaseret struktur. Når en menu strækker sig over 3 eller flere kolonner, bliver den ofte betragtet som en megamenu, der potentielt kan spænde over hele website'ets bredde for maksimal effekt.
Eksempler på store organisationer, der anvender megamenus, inkluderer Acquia.com, Whitehouse.gov og Economist.com. Selvom disse menuer fungerer godt på store skærme, er brugeroplevelsen på mobile enheder ofte mindre ideel. Det er derfor afgørende at have en responsiv tilgang, der sikrer, at menuen tilpasser sig forskellige skærmstørrelser.
Glazed Temaet: En Smart Løsning
Glazed temaet, specifikt i version 2.4.4, introducerer en avanceret multilevel menu-løsning, der skaber smarte megamenus baseret på simple, indlejrede lister. Dette betyder, at man kan oprette en menu-struktur direkte i sit CMS (som f.eks. Drupal), og temaet vil automatisk generere det optimale layout. En af de mest bemærkelsesværdige aspekter ved denne løsning er, at den ikke kræver ekstra moduler og er 100% mobilvenlig.
Denne nye funktion i Glazed temaet markerer en betydelig udvikling, hvor mange ideer fra tidligere versioner er blevet realiseret. Udviklingen af en drag-and-drop builder, der nu er frigivet som et separat premium Drupal-modul, er et andet eksempel på temaets fortsatte innovation. For dem, der søger en integreret og kraftfuld menuløsning, kan det være et godt tidspunkt at overveje et medlemskab af temaets klub eller en opgradering.
Hvordan Glazed Temaet Håndterer Multilevel Menuer:
Glazed temaets menupunkt er designet til at være intelligent. Det analyserer menuens struktur og træffer beslutninger om layoutet. Hvis en dropdown indeholder mere end 7 listeelementer, vil den automatisk blive opdelt i lige store kolonner. Hvis en menu har 3 niveauer, vil denne struktur blive brugt til at skabe kolonner. Og hvis en menu består af 3 eller flere kolonner, bliver den automatisk til en megamenu, der strækker sig over hele website'ets bredde.
Det er især den mobile oplevelse, der har været et fokuspunkt. At skabe en nær-native mobiloplevelse baseret på en multilevel menustruktur har været en stor udfordring. I 2016 fandtes der ikke en bredt understøttet jQuery- eller Bootstrap-udvidelse, der kunne levere denne "native" følelse. Glazed temaet har imidlertid integreret en løsning fra Codrops' blog (http://tympanus.net/Blueprints/MultiLevelMenu/), som tilbyder meningsfuld animation og klar, immersiv navigation. Resultatet er en mobil løsning, der er både elegant og overskuelig.
Integrationen af denne menu i temaet har krævet en del arbejde, især fordi Glazed temaets header- og menuindstillinger kræver, at menuen fungerer i forskellige side-layouts og med varierende indhold og menustrukturer. Når brugeren vælger standard top-header, vil temaet dynamisk reagere på ændringer i browserens vinduesdimensioner. Dette kan ske, når en bruger trækker i kanten af browseren, eller skifter mellem portræt- og landskabstilstand på en mobil enhed. I sådanne tilfælde vil Glazed temaet ombryde siden og placere menuen korrekt med de rette funktioner.
Den nye menu-design i Glazed temaet erstatter TB MegaMenu-modulet i alle deres Drupal-temaer. Udviklerne bag Glazed temaet har haft problemer med TB MegaMenu-modulet, selv efter konvertering til Bootstrap 3. Vedligeholderne af modulet fortsatte med at inkludere Bootstrap 2, selv i Drupal 8-versionen. Desuden er modulets menustruktur ikke eksportabel, og det har haft fejl relateret til oversættelse, brødkrummer, aktive menustier og caching. Da Glazed temaets menu-system udelukkende fungerer baseret på Drupal's kerne-menysystem, er alle disse problemer elimineret. Dette giver kunderne en problemfri oplevelse med komplette megamenu-strukturer fra installation.
Konklusion og Vejen Frem
Selvom Bootstrap 3 ikke tilbyder en indbygget, altomfattende løsning til avancerede multilevel menuer, er det fuldt ud muligt at opnå sofistikerede og brugervenlige menustrukturer ved at kombinere frameworkets grundlæggende funktionalitet med skræddersyet CSS og JavaScript. Megamenus, når de implementeres med omtanke for både desktop- og mobileoplevelsen, kan være et kraftfuldt værktøj til at organisere komplekst indhold.
Temaer som Glazed demonstrerer, hvordan disse udfordringer kan overvindes med innovative løsninger, der prioriterer både funktionalitet og æstetik. Ved at udnytte kernefunktionaliteter og integrere tredjepartsressourcer smart, kan udviklere skabe navigation, der ikke kun er visuelt tiltalende, men også intuitiv og effektiv på tværs af alle enheder.
For dem, der er interesserede i at se, hvordan menuen fungerer i praksis, er det muligt at prøve en backend-demo af Glazed premium Drupal-temaet på trysooperthemes.com. Her kan man opleve, hvor nemt det er at redigere menuen. Der findes også en dedikeret dokumentationsside for det nye menu-system. Hvis du er på udkig efter Drupal-temaer eller en drag-and-drop site builder, kan du blive en del af fællesskabet på sooperthemes.com for en overkommelig pris.
Ofte Stillede Spørgsmål (FAQ)
Understøtter Bootstrap 3 multilevel menuer direkte?
Nej, Bootstrap 3 understøtter ikke avancerede multilevel menuer ud af boksen. Dog kan det opnås med tilpasset CSS og JavaScript.
Hvad er en megamenu?
En megamenu er en stor dropdown-menu, der ofte er opdelt i flere kolonner og kan indeholde forskellige typer indhold, designet til at organisere store mængder information.
Er megamenus gode til mobile enheder?
Megamenus kan være udfordrende på mobile enheder, hvis de ikke er designet responsivt. En veludført mobiloptimering er afgørende for en god brugeroplevelse.
Kræver Glazed temaets multilevel menu ekstra moduler?
Nej, Glazed temaets nye multilevel menu-løsning kræver ingen ekstra moduler og er bygget oven på Drupal's kerne-menysystem.
Hvor kan jeg lære mere om Glazed temaets menu-system?
Du kan finde mere information og en demo på trysooperthemes.com, hvor der også er en dokumentationsside tilgængelig.
| Funktion | Bootstrap 3 Standard | Bootstrap 3 med Custom CSS/JS | Glazed Temaets Løsning |
|---|---|---|---|
| Grundlæggende Multilevel | Begrænset | Ja | Ja |
| Megamenu Funktionalitet | Kræver betydelig udvikling | Ja, med kompleks udvikling | Ja, automatisk |
| Mobilvenlighed | Standard responsivitet | Afhængig af implementering | Ja, med specifik optimering |
| Kræver Ekstra Moduler | Nej | Potentielt (afhængig af kompleksitet) | Nej |
| Smart Layout (kolonner etc.) | Nej | Ja, med udvikling | Ja, baseret på indhold |
Hvis du vil læse andre artikler, der ligner Bootstrap 3 Multilevel Menus: En avanceret vejledning, kan du besøge kategorien Teknologi.