Konsepter - Hamburgermeny

En hamburgermeny er en velkjent navigasjonsløsning på mobil: en knapp med tre horisontale streker som åpner eller skjuler menyvalgene for å spare plass på små skjermer. Ved å bruke HTML5-elementene <details> og <summary> kan vi bygge en fullt fungerende responsiv meny helt uten JavaScript!

1. HTML-strukturen (<details> og <summary>)

I stedet for komplekse skript eller skjulte avkryssingsbokser, bruker vi nettleserens innebygde trekkspillelement:

<details open>: Holder på menyinnholdet. Med attributtet open er menyen åpnet som standard.
<summary>: Fungerer som selve menyknappen. Tre tomme <span>-elementer inni styles til å bli de tre ikon-strekene.
<ul class="menu">: Den vanlige listen med lenker.

<nav aria-label="Hovedmeny">
   <details class="nav-details" open>
     <summary class="menu-btn" aria-label="Meny">
       <span></span> <!-- Øverste strek -->
       <span></span> <!-- Midterste strek -->
       <span></span> <!-- Nederste strek -->
     </summary>

     <ul class="menu">
       <li><a href="#hjem">Hjem</a></li>
       <li><a href="#om">Om</a></li>
       <li><a href="#tjenester">Tjenester</a></li>
       <li><a href="#kontakt">Kontakt</a></li>
     </ul>
   </details>
 </nav>

2. CSS – Mobil først (Standard)

Etter Mobile-First-prinsippet styler vi først for mobil:

summary { list-style: none; } fjerner nettleserens standard pil/trekant.
Hver span gis bredde (25px), høyde (3px) og en liten marg (5px 0) for å danne de 3 ikon-strekene.
Lenkene styles med god klikkflate (padding: 1rem).

/* Bakgrunnsfarge på navigasjonen */
 nav {
   background: #333;
 }

 /* Fjern standard trekant/pil fra summary */
 summary {
   list-style: none;
   cursor: pointer;
   padding: 1rem;
   width: fit-content;
 }

 /* Hamburger-strekene */
 summary span {
   display: block;
   width: 25px;
   height: 3px;
   margin: 5px 0;
   background: white;
 }

 /* Liste-styling */
 .menu {
   list-style: none;
   margin: 0;
   padding: 0;
 }

 .menu a {
   display: block;
   padding: 1rem;
   color: white;
   text-decoration: none;
 }

 .menu a:hover {
   background: #444;
 }

3. CSS – Større skjermer (@media)

Når skjermen er bred nok (f.eks. minst 768px), ønsker vi ikke lenger noen hamburgermeny:

Vi skjuler knappen med summary { display: none; }.
Siden <details> har attributtet open, er innholdet åpnet. Med .nav-details[open] .menu (og .nav-details .menu) setter vi display: flex; flex-direction: row; slik at menyen vises som en horisontal rad.

/* --- Større skjermer (Desktop) --- */
 @media (min-width: 768px) {
   /* Skjul hamburger-ikonet */
   summary {
     display: none;
   }

   /* Tving innholdet til alltid å være synlig på stor skjerm */
   .nav-details[open] .menu,
   .nav-details .menu {
     display: flex;
     flex-direction: row;
   }
 }

4. Interaktiv demonstrasjon

Test menyen i sanntid! I mobilmodus kan du klikke på hamburgerikonet for å åpne og lukke menyen. I skjermmodus forsvinner knappen og lenkene legger seg automatisk på linje:

Simulert mobil: Klikk på hamburger-ikonet for å åpne/lukke

Hvorfor bruke <details> og <summary>?

0 % JavaScript: Ingen behov for å lytte på klikk-hendelser eller toggling av klasser.
Tilgjengelighet (a11y): Elementene er standard HTML og fungerer umiddelbart med tastatur (tast Tab for å navigere og Enter / Mellomrom for å åpne).
Enkel og robust kode: Mindre kode betyr færre feil og raskere innlasting.