jQuery- og CSS-menyer til nettstedet: 6 klassiske menyer og moderne alternativer

En tydelig og brukervennlig navigasjonsmeny er noe av det viktigste på et hvilket som helst nettsted. Menyen er kartet de besøkende bruker for å finne frem, og den avgjør ofte om noen blir værende eller klikker seg bort igjen. Denne guiden forklarer forskjellen på menyer bygget med jQuery og menyer bygget med ren CSS, viser seks klassiske menyer du kan la deg inspirere av, og går gjennom hvordan du selv lager en god, responsiv og tilgjengelig meny i dag.

Hva er en navigasjonsmeny, og hvorfor er den så viktig?

En navigasjonsmeny er samlingen av lenker som lar besøkende bevege seg rundt på nettstedet ditt – ofte plassert øverst på siden som en «topp-meny». Menyen har to jobber samtidig: den skal hjelpe mennesker å finne innhold raskt, og den gir søkemotorene en oversikt over hvordan sidene dine henger sammen.

En dårlig meny merkes med en gang. Hvis lenkene er uklare, hvis undermenyer forsvinner før du rekker å klikke, eller hvis menyen ikke virker på mobil, mister du besøkende. En god meny er derimot nesten usynlig i bruk: den gjør akkurat det brukeren forventer. Målet er at noen skal kunne komme til siden din for første gang og likevel finne det de leter etter i løpet av sekunder.

De fleste menyer bygges med en kombinasjon av HTML (strukturen – selve lenkene), CSS (utseendet og plasseringen) og eventuelt JavaScript eller jQuery (bevegelse og interaktivitet, som menyer som glir ut eller folder seg ned). Jo mer av jobben du kan la CSS gjøre, desto raskere og mer robust blir menyen.

jQuery og CSS – hva er forskjellen, og trenger du begge?

Kort sagt styrer CSS hvordan menyen ser ut og oppfører seg visuelt, mens jQuery er et JavaScript-bibliotek som gjør det enklere å legge til bevegelse og logikk. Mange av de klassiske menyene nedenfor kombinerer de to, men i dag kan ren CSS løse mye av det jQuery tidligere var nødvendig for.

Hva er CSS-menyer?

CSS (Cascading Style Sheets) er språket som bestemmer farger, avstander, skrifttyper og plassering på en nettside. En «CSS-meny» er en meny der selve oppførselen – for eksempel at en undermeny vises når du holder musepekeren over et punkt – er løst med CSS alene, uten JavaScript. Fordelen er at slike menyer laster raskt, er lette å vedlikeholde og fortsetter å fungere selv om JavaScript skulle være slått av. Vil du forstå grunnlaget bedre, har vi en egen innføring i hva CSS er.

Hva er jQuery-menyer?

jQuery er et populært JavaScript-bibliotek som ble lansert i 2006 og i mange år var limet i nesten alle interaktive nettsider. Biblioteket gjorde det kort og enkelt å animere elementer, reagere på klikk og hente innhold uten å laste siden på nytt. En «jQuery-meny» bruker dette biblioteket til effekter som menyer som glir ut, folder seg sammen eller animeres mykt når du peker på dem. For å bruke en slik meny må du laste inn jQuery-filen på siden – gjerne i en egen fil, slik vi forklarer i guiden om å kjøre JavaScript fra en egen JS-fil.

Må du bruke jQuery i 2026?

Nei, i langt færre tilfeller enn før. Da de fleste av menyene i denne artikkelen ble laget, hadde ikke CSS innebygde løsninger for mye av det jQuery ordnet. I dag kan moderne CSS håndtere utfellbare menyer med :hover og :focus-within, responsive oppsett med flexbox, og enkle trekkspillmenyer med HTML-elementene <details> og <summary> – helt uten JavaScript.

jQuery lever likevel videre. Versjon 4.0 kom tidlig i 2026 og ryddet bort gammel kode og støtte for utdaterte nettlesere. Mange eksisterende nettsteder og WordPress-temaer bruker fortsatt biblioteket, og det er fremdeles et trygt valg hvis du allerede har det på plass. Men skal du bygge en meny fra bunnen av i dag, bør du starte med ren CSS og bare legge til JavaScript der du virkelig trenger det.

6 klassiske jQuery- og CSS-menyer du kan la deg inspirere av

Menyene under er klassikere som har inspirert utallige nettsteder. Flere av dem stammer fra en tid da jQuery var standardverktøyet, og noen av demo- og nedlastingslenkene er gamle og fungerer kanskje ikke lenger. Bruk dem derfor som inspirasjon og lærdom om hvordan menytyper fungerer, ikke nødvendigvis som ferdig kode til et nytt prosjekt. Lenger ned viser vi moderne måter å oppnå de samme effektene på.

1. Slide-meny med jQuery

Dette er en meny der punktene glir elegant til siden eller utvider seg når du peker på dem, gjerne kombinert med ikoner. Effekten gir et levende førsteinntrykk og egner seg godt til porteføljer og kreative nettsteder der litt bevegelse understreker uttrykket. Teknikken bygger på at jQuery animerer bredden eller posisjonen til hvert menypunkt.

Opphavet er veiledningen Slide Meny som bruker jQuery, som forklarer oppsettet steg for steg. Du finner en demo som viser hvordan sluttresultatet ser ut.

2. Drop down-meny med jQuery og CSS

En drop down-meny (nedtrekksmeny) er den mest utbredte menytypen av alle: et vannrett hovedmenyfelt der undermenyer folder seg ned når du holder pekeren over et punkt. Denne varianten kombinerer et nøytralt, tidløst design med mild jQuery-animasjon, og passer de fleste nettsteder med flere nivåer av sider.

Den opprinnelige veiledningen Drop Down Menu med jQuery og CSS går gjennom koden, og du kan se prinsippet i praksis i denne demoen. Vil du ha samme effekt uten jQuery, kan du i dag bygge nedtrekksmenyen med ren CSS, som vi viser senere.

3. Kwicks for jQuery

Kwicks er en fargerik meny der punktet du peker på utvider seg mykt mens de andre trekker seg sammen – en slags «harmonikaeffekt» på tvers. Den skiller seg tydelig ut og egner seg til nettsteder som vil ha en leken, visuell navigasjon. Kwicks var i sin tid en av de mest delte jQuery-plugin-ene for menyer.

Du kan se 7 eksempler på hvordan effekten kan brukes. Den opprinnelige nedlastingslenken peker på Google Code, som ble stengt i januar 2016. Den filen er derfor sannsynligvis ikke tilgjengelig lenger, og nyere versjoner av Kwicks finnes i stedet på kodedelingstjenester som GitHub.

4. Enkel trekkspillmeny (accordion) med JavaScript

En trekkspillmeny – ofte kalt accordion – er en loddrett meny der hver seksjon folder seg ut og viser undermenyen sin når du klikker, mens de andre seksjonene lukkes. Den sparer plass og er svært nyttig i sidemenyer, FAQ-lister og på mobil, der skjermen er smal.

Et enkelt eksempel er denne trekkspillmenyen med myk slide-effekt. Vil du studere koden, kan du laste ned kildefilene. I dag kan du oppnå samme effekt helt uten JavaScript ved å bruke HTML-elementene <details> og <summary>, som nettleseren folder ut og inn automatisk.

5. Digg.com-menyen

Dette er en gjenskapning av den karakteristiske toppmenyen nyhetssiden Digg.com hadde i sine velmaktsdager rundt 2008: en bred header med kategorier og nedtrekksmenyer. Den er et godt eksempel på hvordan en informasjonstung meny kan organiseres oversiktlig med tydelige kategorier.

Ideen stammer fra artikkelen om Digg.com-menyen hos CSS-Tricks. Du kan se en demo, lese guiden til oppsett, og laste ned filene. Legg merke til at dette er et øvingseksempel fra 2008 med fylltekst, så det er prinsippet – ikke den eldre koden – som er verdt å ta med videre.

6. Superfish – jQuery meny-plugin

Superfish er en klassisk jQuery-plugin som gjør en vanlig, nøytral CSS-meny om til en meny med pene undermenyer, forsinket lukking og god tastaturstøtte. Den var i mange år standardvalget for utviklere som ville ha en solid nedtrekksmeny med undernivåer uten å kode alt selv.

Du kan lese kom-i-gang-veiledningen for Superfish – jQuery meny plugin, se demoer og laste ned filene. Den opprinnelige nettadressen er gammel og kan være nede; nyere versjoner av Superfish finner du på utviklerens prosjektsider på GitHub.

Slik legger du en meny til på nettstedet ditt

Fremgangsmåten avhenger av om du koder nettstedet selv eller bruker et publiseringsverktøy som WordPress. Prinsippet er likevel det samme: du lager en liste med lenker, styler den med CSS, og legger eventuelt til litt interaktivitet.

1. Bygg strukturen i HTML. En meny er i bunn og grunn en punktliste (<ul> med <li>-punkter) der hvert punkt inneholder en lenke. Er du usikker på hvordan en lenke settes opp, har vi en enkel gjennomgang av hvordan du lager en HTML-lenke.
2. Styl menyen med CSS. Her bestemmer du farger, avstand mellom punktene, og om menyen skal ligge vannrett eller loddrett. Du kan skrive CSS-en i en hvilken som helst teksteditor, men en egnet HTML- og CSS-editor gjør jobben enklere.
3. Legg til interaktivitet ved behov. Skal undermenyer felles ut, kan du ofte klare deg med CSS. Trenger du avanserte animasjoner, legger du til JavaScript eller jQuery.
4. Test på flere skjermstørrelser. Sjekk at menyen fungerer både på stor skjerm og på mobil før du publiserer.

Bruker du WordPress, trenger du som regel ikke kode i det hele tatt. De fleste temaer har en innebygd menyredigerer under Utseende > Menyer, der du drar og slipper sider inn i menyen. Utseendet styres da av temaet ditt – og vil du bytte uttrykk, kan du installere et nytt WordPress-tema på bloggen.

Moderne alternativer: CSS-menyer uten jQuery

I dag kan ren CSS løse de fleste menyoppgavene som tidligere krevde jQuery, og resultatet blir raskere og enklere å vedlikeholde. Her er de viktigste teknikkene.

Vannrett meny med flexbox

Flexbox er en CSS-metode som gjør det enkelt å stille menypunkter opp på en rad med jevn avstand, og som automatisk tilpasser seg bredden på skjermen. Det har erstattet gamle triks som å «flyte» elementer ved siden av hverandre, og er i dag standardmåten å bygge en vannrett hovedmeny på.

Nedtrekksmeny med :hover og :focus-within

En undermeny kan skjules med CSS og vises når brukeren peker på hovedpunktet (:hover) eller flytter tastaturfokus inn i det (:focus-within). Ved å bruke begge sørger du for at menyen virker både med mus og med tastatur, uten en eneste linje JavaScript.

Trekkspillmeny med <details> og <summary>

HTML har et innebygd element for utfellbart innhold: <details> med en <summary> som overskrift. Nettleseren tar seg av å folde innholdet inn og ut når du klikker, og det fungerer også for tastatur og skjermlesere. Dette er den enkleste måten å lage en accordion-meny på i dag.

Responsiv navigasjon og mobilmenyer

En meny må fungere like godt på en liten mobilskjerm som på en stor dataskjerm – det er kjernen i responsivt design. På brede skjermer vises gjerne hele menyen som en rad, mens den på mobil ofte krymper til et lite ikon med tre vannrette streker – den såkalte hamburgermenyen – som åpner menyen når du trykker på den.

Noen råd for mobilmenyer:

• Bruk en ekte knapp. Hamburgerikonet bør være et <button>-element, ikke en vanlig boks, slik at det virker med tastatur og kan leses opp av skjermlesere.
• Gjør trykkeflatene store nok. På mobil bør hvert menypunkt være lett å treffe med tommelen – minst rundt 44 piksler høyt.
• Vis tydelig om menyen er åpen eller lukket. Knappen bør angi tilstanden sin med attributtet aria-expanded, slik at hjelpemidler forstår hva som skjer.
• La menyen lukkes enkelt. Det bør være mulig å lukke menyen igjen med samme knapp eller med Escape-tasten.

Tilgjengelighet: menyer som fungerer for alle

En tilgjengelig meny kan brukes av alle, også de som navigerer med tastatur eller skjermleser i stedet for mus. Dette er ikke bare god folkeskikk – det er et krav på stadig flere nettsteder, og det gjør menyen bedre for alle brukere. En meny som bare reagerer på at du holder musepekeren over den, utelukker alle som ikke bruker mus.

• Alt må nås med tastatur. Brukeren skal kunne bevege seg gjennom menyen med Tab-tasten, åpne undermenyer og aktivere lenker med Enter.
• Synlig fokusmarkering. Det må alltid være tydelig hvilket menypunkt som er «valgt» når man bruker tastatur, for eksempel med en tydelig ramme.
• Bruk riktige HTML-elementer. Pakk menyen inn i et <nav>-element og bruk ekte lenker og knapper. Da forstår skjermlesere automatisk at dette er navigasjon.
• Escape lukker undermenyer. En åpen undermeny bør kunne lukkes med Escape-tasten, og fokus bør flyttes tilbake til punktet som åpnet den.

For de fleste nettsteder anbefaler fagmiljøet et enkelt «vis/skjul»-mønster (disclosure-mønsteret) framfor avanserte menylinjer, fordi det er lettere å få riktig og samsvarer med det folk forventer av en nettsidemeny.

Vanlige feil med navigasjonsmenyer

Selv en pen meny kan ødelegge opplevelsen hvis den har noen av disse svakhetene:

• For mange punkter. En meny med ti eller femten valg på rad blir uoversiktlig. Samle heller beslektede sider under noen få, tydelige kategorier.
• Uklare navn. «Løsninger» og «Ressurser» sier lite. Bruk konkrete ord som beskriver hva brukeren faktisk finner bak lenken.
• Menyer som bare virker med mus. Hover-menyer uten tastaturstøtte stenger ute både tastaturbrukere og mange mobilbrukere.
• Undermenyer som forsvinner for raskt. Hvis en undermeny lukker seg i det sekundet pekeren beveger seg litt, blir den frustrerende å bruke. En liten forsinkelse før lukking løser det.
• Glemt mobilversjon. En meny som er fin på pc, men som flyter utover eller blir uleselig på mobil, mister en stor del av de besøkende.
• Tung kode. Å laste inn et helt JavaScript-bibliotek bare for en enkel nedtrekksmeny gjør siden tregere enn nødvendig når ren CSS ville holdt.

Hvilken meny passer for deg?

Valget avhenger av hvor komplekst nettstedet er og hvor mye bevegelse du ønsker:

• Enkelt nettsted med få sider: En ren, vannrett CSS-meny med flexbox holder lenge og laster lynraskt.
• Nettsted med flere nivåer av sider: En nedtrekksmeny med undermenyer, bygget med CSS :hover og :focus-within, gir god oversikt.
• Mye innhold i sidekolonnen eller på mobil: En trekkspillmeny med <details> sparer plass og er lett å bruke.
• Kreativt eller visuelt nettsted: En animert slide- eller Kwicks-inspirert meny kan forsterke uttrykket – men pass på at den fortsatt er lett å bruke.
• WordPress-blogg: Bruk temaets innebygde menyredigerer, og velg eventuelt et nytt tema hvis du vil ha et annet uttrykk. Trenger du hjelp til valg av tema, har vi en guide til WordPress-design for norske bloggere.

Uansett hvilken du velger: start enkelt, test på både pc og mobil, og legg bare til ekstra effekter der de faktisk gjør menyen bedre å bruke.

Vanlige spørsmål (FAQ)

Trenger jeg jQuery for å lage en meny i dag?

Nei. Ren CSS kan i dag håndtere de aller fleste menyer, inkludert utfellbare undermenyer og responsive oppsett. jQuery er fortsatt greit å bruke hvis du allerede har det på nettstedet, men det er ikke nødvendig for en ny meny.

Hva er forskjellen på en CSS-meny og en jQuery-meny?

En CSS-meny løser utseende og oppførsel med stilsett alene og laster svært raskt. En jQuery-meny bruker JavaScript-biblioteket jQuery til animasjoner og logikk, noe som gir flere muligheter, men også tyngre kode og avhengighet av at JavaScript er på.

Hvordan lager jeg en meny i WordPress?

Gå til Utseende og deretter Menyer i WordPress-kontrollpanelet. Der oppretter du en meny, drar inn sidene du vil ha med, og plasserer menyen i ønsket område. Utseendet styres av temaet ditt, så du trenger som regel ikke skrive kode selv.

Hva er en hamburgermeny?

En hamburgermeny er det lille ikonet med tre vannrette streker som ofte vises på mobil. Når du trykker på det, folder hele menyen seg ut. Det sparer plass på smale skjermer og er blitt et vanlig og gjenkjennelig mønster på mobil.

Hvorfor er tilgjengelighet viktig for menyer?

Fordi en meny som bare virker med mus, stenger ute mange brukere – blant annet de som bruker tastatur eller skjermleser. En tilgjengelig meny kan betjenes med tastatur, har synlig fokusmarkering og bruker riktige HTML-elementer, noe som gjør den bedre for alle besøkende.