Indholdsfortegnelse
En mega menu er en stor, panel-stil dropdown, der åbner under et navigationselement og lægger mange links på én gang i kolonner, i stedet for at stable dem under hinanden. Det erstatter en smal, rulbar undermenu med en bred forhåndsvisning af en hel site sektion, så besøgende ser deres muligheder i stedet for at jage gennem indlejrede menuer.
Du har brugt en på næsten alle store detail eller SaaS websted, du har besøgt. Amazons kategori menu, et universitets akademikere dropdown, en software virksomheds produkt-og-løsninger panel: alle mega menuer. Denne vejledning dækker, hvad der gør en mega menu forskellig fra en almindelig dropdown, når den ekstra kompleksitet betaler sig, når det ikke gør, og hvordan man opbygger en i Elementor uden at betale for en side builder licens.
Hvad Er en Mega Menu?
En megamenu er et todimensionalt dropdown-panel, hvilket betyder, at det bruger både bredde og højde i stedet for en enkelt lodret stak. I stedet for en kolonne med seks eller syv links kan en megamenu vise fire eller fem kolonner, hver med sin egen overskrift, underlinks og nogle gange et ikon, miniaturebillede eller kort promo-blok.
Udløseren fungerer på samme måde som enhver dropdown: hold markøren eller klik på et element på øverste niveau som Produkter, Tjenester eller Shop. Det, der vises, er anderledes. En standard dropdown viser en smal liste. En megamenu åbner et panel i fuld bredde eller næsten fuld bredde, der kan indeholde snesevis af links organiseret efter kategori, i henhold til forskning fra Nielsen Norman Group om, hvordan besøgende scanner store navigationspaneler.
Hvordan en Mega Menu Differs Fra en Standard Dropdown
Den praktiske forskel kommer ned til tre ting: bredde, struktur og indholdstype.
- Bredde: en standard dropdown kører 200 til 300 pixels bred; en mega menu kan spænde over det meste af viewporten.
- Struktur: en dropdown er én kolonne; en megamenu bruger flere kolonner, ofte grupperet under underoverskrifter.
- Indhold: en dropdown er almindelige tekstlinks; en megamenu blander ofte links med ikoner, miniaturebilleder eller korte beskrivelser.
Den strukturelle forskel er også grunden til, at mega menuer tager mere planlægning. En standard dropdown er let at smide sammen: liste seks links, og du er færdig. En mega menu har brug for en faktisk informationsarkitektur: hvilke kategorier får top fakturering, hvad der går i hver kolonne, og hvordan det hele kollapser på en telefonskærm uden plads til fire kolonner side om side.
Mega Menu vs Dropdown vs Off-Canvas Menu
Mega menuer er ikke den eneste måde at organisere en masse navigation på. Her er hvordan de tre mest almindelige mønstre sammenlignes.
| Navigationstype | Best For | Styrke | Pas på |
|---|---|---|---|
| Standard Dropdown | Websteder med en håndfuld sider pr. sektion | Hurtig at bygge, ingen indlæringskurve for besøgende | Løber tør for plads forbi 8 til 10 links |
| Mega Menu | Store kataloger, mange kategorier eller produktlinjer | Viser hele afsnittet med et blik, plads til billeder og gruppering | Har brug for ægte design og indholdsplanlægning; let at overdrive |
| Off-Canvas Menu | Mobile-first sites, minimale overskrifter | Holder overskriften ren, fungerer godt på små skærme | Skjuler navigation bag et tryk, og tilføjer et ekstra trin |
Når en Mega Menu Faktisk Hjælper
En mega menu tjener sin kompleksitet, når et websted har ægte dyb navigation. E-handel butikker med snesevis af produktkategorier, universiteter med afdelinger og programmer, medier sites med mange sektioner, og SaaS virksomheder med flere produkter og use cases alle har tendens til at vokse en standard dropdown hurtigt.
Testen er enkel: Hvis din nuværende dropdown allerede har brug for en rullepanel, eller besøgende lander på kategorisider gennem søgning, fordi de ikke kunne finde dem i overskriften, løser en megamenu et reelt problem i stedet for at dekorere en.
Når en Mega Menu Gør Ondt Mere End Det Hjælper
Et lille brochure site med fem sider behøver ikke en mega menu, og at bygge en alligevel normalt gør webstedet føles mere kompliceret end det er. Hvis hele din navigation passer i seks eller syv links, en mega menu tilføjer visuel vægt, ekstra markup, og en ting mere, der kan bryde på en telefon, uden reel fordel.
En dårlig mega menu er værre end en simpel menu. Cramming hver side på webstedet i ét panel, fordi “mere synlig er bedre” begraver de links besøgende faktisk ønsker under dem, de ikke gør. Hvis hver kolonne ser lige så vigtigt, ingen af dem er. Trimme listen til de sektioner, folk rent faktisk søger efter, før du bygger panelet.
Fælles Mega Menu Design Mønstre
- Kolonne med links: almindelige kategoriserede linklister, det mest almindelige mønster og det nemmeste at vedligeholde.
- Udvalgt eller promo panel: link kolonner blandet med et promo billede, banner, eller call-to-action blok.
- Ikonstyret menu: hvert link parret med et lille ikon, fælles på SaaS-funktions- og løsningsmenuer.
- Tabbed mega menu: kategorier på øverste niveau fungerer som faner inde i panelet og skifter, hvilke kolonner der vises.
Tilgængelighed og mobile overvejelser
En mega menu er kun så god som dens tastaturunderstøttelse. Hver trigger skal åbne på både hover og fokus, da en besøgende, der tabber gennem overskriften med et tastatur, ikke kan holde noget. Tilføj aria-expanded til udløseren og aria-haspopup så skærmlæsere annoncerer, at et panel er tilgængeligt, og sørg for, at Escape lukker panelet og returnerer fokus til udløseren.
På telefoner er der ikke plads til fire kolonner side om side, så de fleste mega menuer kollapser i en stablet harmonika under et hamburgerikon. Test den kollapsede version som en rigtig besøgende: tryk på mål skal være store nok til en tommelfinger, og listen bør ikke tage mere rulning for at nå bunden end den side, den beskytter.
Sådan opbygger du en megamenu gratis i Elementor
Elementors egen mega menu mulighed lever bag Elementor Pro, inde i den indlejrede menu komponent dækket af Elementor's mega menu dokumentation. Hvis du er på den gratis version af Elementor, er den sti lukket.
The Master Addons Mega Menu udvidelse får dig det samme resultat uden Elementor Pro. Det gør ethvert element i din eksisterende WordPress navigationsmenu til en trigger for et fuldt designet Elementor panel under det, og det er et af snesevis af værktøjer i Master Addons widgets og udvidelser bibliotek.
- Installer og aktiver Master Addons (gratis) sammen med Elementor, og aktiver derefter Mega Menu-udvidelsen fra Master Addons → Extensions.
- Gå til Udseende → Menuer, eller åbn din overskrift i Master Addons Theme Builder hvis det er der, din overskrift bor, og tænd Aktiver Mega Menu. Et lilla Master Mega badge vises ved siden af hvert menupunkt; klik på badget på det element, du vil omdanne til en mega menu.
- Aktiver Mega Menu på det element, og klik derefter på Rediger med Elementor for at designe panelet: kolonner, billeder, ikoner eller kampagneblokke, uanset hvad sektionen har brug for.
- Indstil panelets bredde, fuld bredde eller indeholdt, og udgiv og kontroller det derefter på både skrivebordet og en rigtig telefon.
Vil du først se det i et færdigt layout? Den Mega Menu demo og the Trækul Navbar & Mega Menu sektion begge viser udvidelsen i en live header.
Ofte stillede spørgsmål
Hvad betyder mega menu?
En megamenu er et stort dropdownpanel med flere kolonner, der åbnes under et navigationselement og viser mange links på én gang, ofte grupperet efter kategori og parret med ikoner eller billeder. Det erstatter en enkelt smal liste med en bredere, organiseret forhåndsvisning af et webstedsafsnit.
Hvordan oprettes en mega menu?
Gør et almindeligt navigationsmenupunkt til en mega menuudløser, og design derefter panelindholdet: kolonner med links, overskrifter og valgfrie billeder eller ikoner. I WordPress og Elementor håndterer et plugin som Master Addons Mega Menu udløseren og lader dig bygge panelet visuelt, så du ikke behøver at håndkode dropdown markup.
Hvad er forskellen på en almindelig menu og en megamenu?
En almindelig rullemenu viser en enkelt smal kolonne med tekstlinks. En megamenu åbner et bredere panel med flere kolonner, og blander ofte billeder, ikoner eller korte beskrivelser sammen med linkene. Almindelige menuer passer til en håndfuld sider; megamenuer passer til websteder med mange kategorier eller sektioner.
Hvad er fordelene ved at bruge en mega menu?
En mega menu viser et helt websted sektion på et øjeblik i stedet for at tvinge besøgende til at åbne og re-åbne indlejrede undermenuer. Det reducerer antallet af klik for at nå en dyb side, giver dig plads til visuelle signaler som ikoner eller miniaturer, og fungerer godt for butikker, universiteter, og software sites med en masse kategorier at organisere.
Er Max Mega menuen gratis?
Max Mega Menu, et selvstændigt WordPress plugin, har en gratis version på WordPress.org med betalte tilføjelser til ekstra funktioner. Hvis du allerede bygger i Elementor, er Master Addons Mega Menu-udvidelsen et gratis alternativ, der designer panelet med Elementor-editoren i stedet for en separat menu-bygger-grænseflade.
Hvordan opretter jeg min egen menu?
Byg din navigationsmenu først under Udseende, derefter Menuer i WordPress, tilføje de sider og links, du ønsker i den rækkefølge besøgende skal se dem. Når den menu eksisterer, kan du slå nogen af sine elementer i en mega menu trigger og designe dropdown panelet oven på det.
Relateret læsning
