CSS navigationsfelt

Demonstration: Navigationsfelt

Lodret navigationsfelt

Vandret navigationsfelt


Navigationsfelt

En brugervenlig navigationsbar er vigtig for enhver hjemmeside.

Ved hjælp af CSS kan du omdanne en kedelig HTML-menu til en smuk navigationsbar.

Navigationsfelt = liste af links

Navigationsfeltet kræver standard HTML som grund.

I vores eksempel vil vi bygge navigationsfeltet med standard HTML-lister.

Navigationsfeltet er i hovedtræk en liste af links, så det er meget meningsfuldt at bruge <ul> og <li> elementer:

Eksempel

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">Nyheder</a></li>
  <li><a href="contact.asp">Kontakt</a></li>
  <li><a href="about.asp">Om</a></li>
</ul>

Prøv det selv

Fjern nu punktmærkerne samt kantmargen og indre kantmargen (fyldning) fra listen:

Eksempel

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Prøv det selv

Eksempel forklaring:

  • list-style-type: none; - Fjern punktmærker. Navigationslinjen har ikke brug for punktmærker.
  • indstilling margin: 0; og padding: 0; Fjern browserens standardindstillinger.

Koden i det foregående eksempel er standardkoden, der bruges i både lodret og vandret navigationsfelt, og du vil lære mere om dette i det næste kapitel.