CSS Navigatiemenu

Demonstratie: navigatiebalk

Verticale navigatiebalk

Horizontale navigatiebalk


Navigatiebalk

Eenvoudige navigatie is belangrijk voor elke website.

Met behulp van CSS kunt u saaie HTML-menu's omzetten in aantrekkelijke navigatiebalken.

Navigatiebalk = lijst van links

De navigatiebalk vereist standaard HTML als basis.

In ons voorbeeld zullen we de navigatiebalk bouwen met standaard HTML-lijsten.

De navigatiebalk is eigenlijk een lijst van links, dus het is nuttig om <ul> en <li>-elementen te gebruiken:

Voorbeeld

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

Probeer het zelf uit

Nu, verwijder lijstpunten, marges en binnenmarges (vulling) van de lijst:

Voorbeeld

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

Probeer het zelf uit

Voorbeeld uitleg:

  • list-style-type: none; - Verwijder lijstpunten. De navigatielijn heeft geen lijstitemsymbool nodig.
  • Instellen margin: 0; en padding: 0; Verwijder de standaard instellingen van de browser.

De code in het voorbeeld is de standaardcode die wordt gebruikt in de verticale en horizontale navigatielinten, je zult in het volgende hoofdstuk meer leren.