CSS Basis
Selectors
Geavanceerd
CSS Basis
Selectors
Geavanceerd

CSS Navigatiebalk

Op deze pagina leer je hoe je een verticale en een horizontale navigatiebalk kunt maken.


CSS navigatie menu

Het hebben van een eenvoudig te gebruiken navigatie menu is belangrijk voor elke website, zo kunnen de bezoekers van je website makkelijk navigeren. Met CSS kun je simpel uitziende HTML menu's transformeren in goed uitziende navigatiebalken.

Een navigatiebalk is eigenlijk een lijst met links. Om een menu te maken heb je standaard HTML nodig als basis. In onze voorbeelden zullen we de navigatiebalk bouwen van een standaard HTML lijst. Een navigatie- balk is eigenlijk een lijst met links, om een navigatiebalk te maken, maak je gebruik van de HTML elementen <ul> en <li>.

Zie lijsten voor uitgebreide informatie over HTML lijst elementen.

VoorbeeldVoorbeeld: 
<ul>
  <li><a href="home.php">Home</a></li>
  <li><a href="tags.php">Tags</a></li>
  <li><a href="links.php">Links</a></li>
  <li><a href="contact.php">Contact</a></li>
</ul>

Laten we nu de stippen (bullets), margin en padding uit de lijst verwijderen.

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

Voorbeeld in het kort uitgelegd: 

list-style-type: none;
Verwijdert de stippen ook wel genoemd bullets. Een navigatiebalk heeft geen lijstmarkeringen nodig. 

margin: 0; en padding: 0;
Deze waarden verwijderen de standaardinstellingen voor marges en opvulling van de browser.

Tip De code wat je in het bovenstaande voorbeeld hebt gezien is de standaardcode dat wordt gebruikt om zowel een verticale als een horizontale navigatiebalk te maken.

CSS verticale menu

Om een verticale navigatiebalk te maken, kun je de <a> elementen in een lijst opmaken. Om te beginnen gebruik je ook hiervoor de standaardcode die we in het bovenstaande voorbeeld hebben besproken.

VoorbeeldVoorbeeld: 
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px; 
  background-color: #d1d1d1;   
}

li a {
  display: block;
}

Voorbeeld in het kort uitgelegd: 

display: block;
Door de links als blokelementen op te geven, kan er op het hele linkgebied worden geklikt. Nadat we de breedte hiervoor hebben opgegeven kunnen we indien gewenst de links gaan stylen zoals een opvulling, marge, hoogte, dikte, grootte enz. aan toe te voegen. 

width: 200px;
Blokelementen nemen standaard de volle breedte in beslag. Daarom hebben we in het voorbeeld een breedte van 200 pixels opgegeven. Probeer deze regel maar eens te verwijderen om te zien wat er dan gebeurd.

Voorbeeld van een verticale navigatiebalk:

VoorbeeldVoorbeeld: 
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

CSS horizontale menu

Veel voorkomende menu's in CSS zijn de horizontale navigatiebalken bovenin de pagina waar de bezoeker doormiddel deze menu makkelijk kan navigeren door de website. Een goede manier om een horizontale navigatiebalk te maken, is door de <li> elementen als inline op te geven.

VoorbeeldVoorbeeld: 
li {
  display: inline;
}

Een andere manier om een horizontale navigatiebalk te maken, is door de <li> elementen te laten zweven en een layout op te geven voor de navigatiekoppelingen ook wel genoemd links. Dit doe je door de eigenschap float te gebruiken. Meer informatie over float kun je hier vinden.

VoorbeeldVoorbeeld: 
li {
  float: left;
}

li a {
  display: block;
  padding: 8px;
  background-color: #d1d1d1;
}

Tip Indien je wenst om de achtergrondkleur in de volledige breedte te weergeven dan kan je de achtergrondkleur toevoegen aan het <ul> element in plaats van het <a> element.

VoorbeeldVoorbeeld: 
ul {
  background-color: #d1d1d1;
}

Voorbeeld van een horizontale navigatiebalk:

VoorbeeldVoorbeeld: 
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #555;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-align: center;  
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #444;
}

.active {
  background-color: #FF6347;
}
Ad blocker gedetecteerd!
  Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.