Konsepter - Navigasjonsmeny

En navigasjonsmeny er en sentral del av enhver nettside, da den lar brukere finne frem til de ulike sidene. Tradisjonelt bygges dette ved hjelp av et navigasjonselement som inneholder en liste med lenker.

HTML-strukturen

Vi starter med å bygge selve innholdet. Vi legger en uordnet liste (<ul>) med listeelementer (<li>) og lenker (<a>) inne i en <nav>-tag. Dette gir god semantikk og er bra for skjermlesere og søkemotorer.

<nav>
   <ul>
     <li><a href="/">Hjem</a></li>
     <li><a href="/om">Om oss</a></li>
     <li><a href="/kontakt">Kontakt</a></li>
   </ul>
 </nav>

Vertikal meny (CSS)

Siden en meny er basert på en liste, vil den naturlig vises vertikalt. Vi trenger imidlertid å fjerne standard kulepunkter, marger og understreking på lenkene for å få den til å se ut som en ordentlig meny.

<nav class="vertikal-meny">
   <ul>
     <li><a href="#">Meny 1</a></li>
     <li><a href="#">Meny 2</a></li>
   </ul>
 </nav>

.vertikal-meny ul {
   list-style-type: none;
   padding: 0;
 }

 .vertikal-meny a {
   display: block;
   padding: 10px;
   text-decoration: none;
 }

Horisontal meny (CSS)

For å plassere lenkene ved siden av hverandre (horisontalt), er flexbox det enkleste og mest moderne verktøyet. Vi setter display: flex på selve listen (<ul>).

<nav class="horisontal-meny">
   <ul>
     <li><a href="#">Meny 1</a></li>
     <li><a href="#">Meny 2</a></li>
   </ul>
 </nav>

.horisontal-meny ul {
   display: flex;
   gap: 1rem;
   list-style-type: none;
   padding: 0;
 }

 .horisontal-meny a {
   text-decoration: none;
 }