Guide: Horisontal menu med HTML5 og CSS

Mine damer og herrer… Jeg præsenterer  den første guide nogensinde på KrisThomsen.dk.

Vi skal kigge på hvordan man laver en simpel horisontal menu-linje til sin webside med en uordnet liste og lidt simpel CSS.

Jeg tror vi starter ud med HTML’en – jeg har valgt at bruge HTML5-elementet <nav> men man kan også bruge et almindeligt <div>-element.

Det er jo ikke så slemt, vel? Et <nav>-element med en simpel uordnet liste – <ul> – og nogen menu-punkter. Nu til den “sjove” del, CSS’en – jeg viser jer kun den kedelige del, designet må i selv stå for.

Jeg løj en lille smule før – dette har ikke så meget med hvordan menuen fungerer, men mere lidt simpel design. Jeg angiver at menuen skal have baggrundsfarven #eee (lysegrå), og at der skal være en margen på 50px på hver side af menuen.

Så kom vi til det vigtige. Først fjerner vi “prikkerne”/“bullet-points” foran elementerne i listen. Eftersom en uordnet liste er indrykket som standard (normalt for at der er plads til prikkerne), bliver vi nødt til at nulstille margin og padding. Til sidst sørger vi for at punkterne er centreret. Men vi mangler lige en lille smule CSS endnu;

Her ser vi “display: inline” – dette er nok det vigtigste punkt overhovedet, eftersom det er dette punkt, som giver os en horisontal menu. Og til sidst sætter vi lige en margin på begge sider, så der er lidt afstand mellem punkterne.

Så simpelt kan det gøres! Jeg håber i kunne bruge guiden, jeg vil nok lægge flere små guides op gennem tiden.

4 tanker om “Guide: Horisontal menu med HTML5 og CSS”

    1. Tjaa, hvorfor ikke? 🙂

      Jeg synes det er den pæneste måde at gøre det på, og semantisk set vil jeg mene det er bedst. Derudover kunne det være man i fremtiden ville benytte drop-downs, og så er det nemmere at fortsætte stilen, end at skulle kode menuen helt om 🙂

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *