Besøkende skal ikke måtte gjette hvor de skal plassere markøren for å finne riktig seksjon. Hvis et nettsted har mer enn seks nøkkelsider, blir en standard nedtrekksmeny en fingerferdighetstest: én feil bevegelse, og brukeren returneres til start. En megameny løser dette problemet radikalt.

En megameny er en bred, utvidbar meny der alle kategorier er synlige samtidig, uten overlappende undermenyer og lenkejakt. Store markedsplasser, nyhetsportaler og innholdsprosjekter bruker denne tilnærmingen ikke for estetikkens skyld, men fordi den fungerer: en besøkende når den nødvendige tredjenivåseksjonen med ett klikk.

Problemet er at WordPress ikke støtter megameny ut av boksen. Selv om et tema tilbyr et innebygd alternativ, er det nesten alltid begrenset til et par kolonner uten skikkelig tilpasning. For en fullverdig megameny med en visuell editor, responsiv versjon og presise innstillinger, trenger du riktig verktøy, og det er her Elementor og The Plus Addons kommer inn i bildet.

💡 Rask oversikt:

• Aktiver TP Navigation Menu-widgeten i The Plus Addons og opprett en megameny-mal gjennom Elementors visuelle editor.
• Konfigurer den vanlige WordPress-menyen (Utseende, Menyer), og legg til den opprettede malen som et element som utvider megamenyen.
• Opprett en topptekstmal via Elementor Theme Builder og plasser Navigation Menu-widgeten fra The Plus Addons i den.
• Konfigurer responsiv atferd: separat meny eller mal for mobilbesøkende, brytningspunkt, utseende.

Når nettstedet ditt trenger en megameny

En megameny er ikke en universalløsning for ethvert prosjekt. Men hvis et nettsted har mer enn seks seksjoner med underkategorier, slutter standardnavigasjon å fungere. Brukeropplevelsesforskere fra Nielsen Norman Group formulerer det presist: «Megameny fungerer godt for nettstedsnavigasjon... Dette er et utmerket designvalg når du må håndtere et stort antall valgmuligheter eller vise sider på lavere nivå med et blikk.»

I nettbutikker er en megameny i praksis en standard. Produktkategorier, underkategorier, filtre, alt dette må vises til den besøkende umiddelbart, ikke skjules bak en rekke hover-effekter:

Dette er et kolossalt skritt fremover sammenlignet med den «gamle» tilnærmingen, sammensatte menyer med overlappende undermenyer, der en besøkende krevde skarpskytterpresisjon i bevegelsene, og én feil returnerte dem til begynnelsen:

Slik bruker store nettbutikker megameny:

Etsy har en lignende tilnærming: kategoriene håndlaget, vintage og rekvisita utvides i ett panel, kjøperen ser hele utvalget med en gang:

Men megameny er ikke bare for netthandel. Nyhetssider, magasiner, innholdsutgivere, bedriftsportaler, overalt hvor du må gjøre en mengde informasjon på mellom- og lavere nivå tilgjengelig, fungerer denne teknikken:

Yelp grupperer restauranter, hjemmetjenester og biltjenester i intuitive blokker, noe som sparer besøkende for tid til søk:

Nettstedbygger Tilda bruker en megameny for å vise maltyper og porteføljeeksempler, noe som hjelper nye brukere med å orientere seg:

Reisenettstedet Duvine presenterer reisemål i et oversiktlig rutenett, slik at man slipper å bla gjennom en katalog:

Byrået Quasar plasserer portefølje, tjenester og kontaktinformasjon i en megameny, og gjør navigasjonen til en utstillingsplass for kompetanse:

Hva du trenger for å lage en megameny

Elementor har en visuell editor med dra og slipp og alle designmulighetene du trenger for å bygge en megameny. Men for å legge til selve funksjonaliteten, som utfelling ved hover, posisjonering og responsiv veksling, trenger du en tredjeparts plugin.

Nærmere bestemt The Plus Addons for Elementor. Dette er en kraftig utvidelse med over 120 widgeter, og blant dem finner du TP Navigation Menu-widgeten, som dekker alle scenarioer: horisontale, vertikale og sidebar-megameny, toggles og responsive valg.

Hva The Plus Addons gir deg:

• Full Elementor-integrasjon. Widgeten er skrevet spesifikt for Elementor og er kompatibel med alle andre widgeter og byggerfunksjoner, uten at du trenger å lære et nytt grensesnitt.
• Pikselperfekt responsivitet. Du kan angi ulike menyer eller til og med ulike megameny-maler for desktop og mobile enheter.
• Støtte på tvers av nettlesere. Alle besøkende får en like god opplevelse uavhengig av nettleser.
• Fleksibel tilpasning. Innstillinger for størrelse, justering, etikettfarger, ikoner, alt gjennom det velkjente Elementor-panelet.

For full header-funksjonalitet trenger du også Elementor Pro. Deres Theme Builder lar deg lage en egendefinert header-mal og plassere Navigation Menu-widgeten i den.

Slik lager du en megameny i Elementor: trinn-for-trinn-guide

Hele prosessen består av fem trinn. Sørg for at tre utvidelser er installert og aktivert:

• Elementor (gratis)
• Elementor Pro-versjon, for temabyggeren og egendefinerte topptekster
• The Plus Addons for Elementor, gratisversjonen er tilgjengelig på WordPress.org, men for navigasjonsmenywidgeten trenger du en Pro-lisens fra den offisielle nettsiden

Trinn 1. Aktiver TP Navigation Menu-widgeten

Gå til ThePlus Settings → Plus Widgets i WordPress-administrasjonspanelet og aktiver widgeten TP Navigation Menu:

Etter aktivering vises en ny egendefinert innholdstype Plus Mega Menu i sidepanelet i administrasjonspanelet, dette er lagringsstedet for alle megamenymalene dine.

Trinn 2. Lag en megamenymal i Elementor

Gå til Plus Mega Menu → Add New. Gi malen et meningsfylt navn, dette vil være nyttig når du bruker forskjellige megameny på forskjellige steder på nettstedet. Klikk på Edit with Elementor:

Nå er du i Elementors visuelle editor. Bygg megamenyoppsettet som en vanlig side: en overordnet seksjon som spenner over hele bredden av megamenyen, inni den kolonner for hver semantiske blokk, og i kolonnene, hvilke som helst Elementor-widgeter: overskrifter, lister, bilder, knapper. Elementor Navigator (strukturpanel nederst til venstre) hjelper deg med å visualisere hierarkiet av seksjoner og kolonner.

Når designet er klart, lagre og publiser malen.

Trinn 3. Konfigurer WordPress-navigasjonsmeny

Nå må du koble den opprettede malen til den faktiske nettstedmenyen. Gå til Appearance → Menus. Hvis det ikke finnes noen meny ennå, opprett en.

Først legger du til vanlige toppnivåelementer for nøkkelseksjoner via Custom Links, dette er elementer som ikke utvider en megameny, men bare fører til sider.

Utvid deretter Plus Mega Menu-seksjonen i sidepanelet for å legge til elementer og velg malen som ble opprettet i forrige trinn, den vil bli lagt til som et menyelement, og når du holder musepekeren over det, vil megamenyen utvides.

Hvis Plus Mega Menu-seksjonen ikke vises, skjuler WordPress den. Klikk på Screen Options øverst i høyre hjørne og kryss av for Plus Mega Menu:

For det tilføyde elementet konfigurerer du størrelse og justering. Tre størrelsesalternativer er tilgjengelige:

• Default, maksimal bredde i piksler.
• Container, etter nettstedets containerbredde.
• Full Width, megamenyen strekker seg til full skjermbredde.

Her konfigurerer du også elementetiketten, etikettfarger og ikoner:

Trinn 4. Lag en topptekstmal i temabyggeren

Nå må megamenyen plasseres i nettstedets topptekst. Til dette brukes temabyggeren, en del av Elementor Pro.

Gå til Templates → Theme Builder og opprett en ny topptekstmal (eller rediger en eksisterende). Du kan velge en ferdig topptekstmal eller bygge din egen fra bunnen av. Gjennom Elementor Pros visningsbetingelser konfigurerer du hvor denne toppteksten skal vises, på hele nettstedet eller bare på bestemte sider.

I toppteksteditoren legger du til widgeten TP Navigation Menu fra The Plus Addons:

I widgetinnstillingene velger du menyretning, horisontal, vertikal eller vertikal sidefelt:

Velg deretter menyen du konfigurerte i trinn 3 i feltet Select Menu:

Ytterligere stilparametere er tilgjengelige under fanen Style, farger, fonter, mellomrom, hover-effekter.

Trinn 5. Konfigurer responsiv oppførsel

Siste trinn, mobilversjon. Utvid innstillingene for Mobile Menu under fanen Content på Navigation Menu-widgeten. Aktiver alternativet Responsive Mobile Menu og angi brytningspunktet, skjermbredden der mobillayout aktiveres:

I nedtrekkslisten Menu Content velger du hva mobilbesøkende skal se: samme meny som på desktop, en separat meny uten megameny (opprettet under Utseende → Menyer) eller en helt separat mal bygget i Elementor.

Ferdig. Du har nettopp opprettet en responsiv megameny på WordPress ved hjelp av Elementor og The Plus Addons.

Video: oppsettprosessen i praksis

Teori er bra, men en live demonstrasjon sparer en halvtime med prøving og feiling. Denne videoen viser hele oppsettprosessen for Navigation Menu-widgeten fra The Plus Addons for Elementor, fra aktivering til en fungerende megameny på nettstedet:

⁉️🤔 Ofte stilte spørsmål

Trenger man Elementor Pro for å lage en megameny?

Ja, Elementor Pro er nødvendig. Gratisversjonen av Elementor inkluderer ikke Theme Builder, verktøyet for å lage egendefinerte topptekstmaler, og uten dette kan du ikke plassere en megameny-widget i sidens topptekst. Standard WordPress-temaer gir ikke noe område for å sette inn en Elementor-widget i navigasjonen. Elementor Pro-lisens starter på $59 per år for ett nettsted.

Er The Plus Addons gratis eller betalt?

The Plus Addons har en gratisversjon på WordPress.org med et grunnleggende sett med widgeter. TP Navigation Menu-widgeten, som håndterer megamenyene, er imidlertid kun tilgjengelig i Pro-versjonen. En Pro-lisens kjøpes på det offisielle nettstedet theplusaddons.com og inkluderer 120+ widgeter, 1000+ maler og prioritert support. En alternativ vei er Elementor Pros innebygde megameny (kom i versjon 3.12+), men den er mindre fleksibel: ingen sidemeny og vertikal megameny, færre responsivitetsinnstillinger.

Kan man lage flere forskjellige megamener på ett nettsted?

Ja. The Plus Addons lar deg opprette et ubegrenset antall megamenymaler via Plus Mega Menu → Add New. Hver mal bygges uavhengig i Elementor. I WordPress-menyer (Utseende → Menyer) legger du til de nødvendige malene som separate elementer, for eksempel «Katalog»-megameny for «Produkter»-elementet og «Tjenester»-megameny for «Tjenester»-elementet. Gjennom Elementor Pros visningsbetingelser kan du vise forskjellige topptekster på ulike sider: én topptekst for butikken, en annen for bloggen.

Hva gjør man hvis megamenyen ikke vises på mobil?

Sjekk tre innstillinger i Navigation Menu-widgeten. For det første, er alternativet Responsive Mobile Menu aktivert (Content-fanen → Mobile Menu). For det andre, er brytningspunktet satt riktig (bredde i piksler der mobillayout aktiveres). For det tredje, er en spesifikk kilde valgt i Menu Content: hvis den er satt til «Same as desktop», men desktop-menyen er for bred for mobilskjermen, vil den ikke passe. Løsning: opprett en egen forenklet meny for mobil under Utseende → Menyer og velg den i nedtrekkslisten Menu Content.

Kommer The Plus Addons i konflikt med andre Elementor-utvidelser?

Ekstremt sjelden. The Plus Addons er skrevet spesifikt for Elementor og testes for kompatibilitet med hver større oppdatering. I mai 2026 fikk utvidelsen WordPress 7.0-kompatibilitet to dager etter lansering, noe som viser supportnivået. Hvis en konflikt likevel oppstår, begynn med å deaktivere andre Elementor-tillegg én etter én for å finne synderen. Oftest skapes problemer ikke av hovedutvidelser, men av obskure tillegg med uprøvd CSS.

Lag en megameny som fungerer for deg

En megameny er ikke dekorasjon, men et navigasjonsverktøy som gjør kaos fra tretti sider om til en forståelig struktur. En besøkende ser alt på én gang, når ønsket seksjon med ett klikk og forlater ikke nettstedet i frustrasjon.

Med Elementor og The Plus Addons får du visuell kontroll over hver eneste piksel i megamenyen uten en eneste linje kode. De fem trinnene beskrevet ovenfor, aktivering, mal, meny, topptekst, responsiv, dekker hele syklusen fra idé til fungerende løsning på én til halvannen time.

Velg verktøyet for oppgaven. Hvis nettstedet er enkelt og budsjettet er begrenset, er Elementor Pros innebygde megameny tilstrekkelig. Hvis prosjektet er komplekst, med flere typer megamener, ulik mobil- og desktop-navigasjon, installer The Plus Addons og se deg ikke tilbake.