CSS Horizontale Navigatiemenu

Horizontale navigatielijn

Er zijn twee manieren om een horizontale navigatielijn te maken: gebruikInlineofGefloatLijstitems.

Inline lijstitems

Een manier om een horizontale navigatielijn te bouwen, is door naast de 'standaard' code van het vorige hoofdstuk, de <li>-elementen te specificeren als inline:

Voorbeeld

li {
  display: inline;
}

Probeer het zelf uit

Voorbeeld uitleg:

display: inline; - Standaard is het <li>-element een blokelement. Hier verwijderen we de enter-caractères voor en na elke lijstitem, zodat ze op een lijn kunnen worden weergegeven.

Gefloatde lijstitems

Een andere manier om een horizontale navigatielijn te maken, is door de <li>-elementen te floaten en een lay-out voor de navigatielinks te specificeren:

Voorbeeld

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Probeer het zelf uit

Voorbeeld uitleg:

  • float: left; - Gebruik float om blokelementen naast elkaar te laten glijden
  • display: block; - Door de link weer te geven als een blokelement, kan het hele klikgebied van de link worden aangeklikt (niet alleen de tekst), en kunnen we vulwijdte (indien nodig, ook hoogte, breedte, marges, enz.) specificeren
  • padding: 8px; - Maak blokelementen aantrekkelijker
  • background-color: #dddddd; - Voeg een grijze achtergrondkleur toe aan elk element

Tip:Als je een volledige breedte achtergrondkleur wilt, voeg dan background-color toe aan <ul> in plaats van aan elk <a>-element:

Voorbeeld

ul {
  background-color: #dddddd;
}

Probeer het zelf uit

Voorbeeld van horizontale navigatielijn

Maak een basis horizontale navigatielijn met een donkere achtergrondkleur en verander de achtergrondkleur van de link wanneer de gebruiker de muis over de link brengt:

Voorbeeld

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Verander de linkkleur naar #111 (zwart) wanneer de muis erover hangt */
li a:hover {
  background-color: #111;
}

Probeer het zelf uit

Actieve/actuele navigatielink

Voeg de "active"-klasse toe aan de huidige link, zodat de gebruiker weet op welke pagina hij/zij zich bevindt:

Voorbeeld

.active {
  background-color: #4CAF50;
}

Probeer het zelf uit

Rechts uitgelijnde links

Rechts aligneren van de links door de lijstitems naar rechts te laten drijven (float:right;）：

Voorbeeld

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">Nieuws</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">Over ons</a></li>
</ul>

Probeer het zelf uit

randscheiding

Voeg border-right Voeg de eigenschap toe aan <li> om een linkenscheidingsteken te maken:

Voorbeeld

/* Voeg een grijze rechterrand toe aan alle lijstitems, behalve het laatste item (last-child) */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

Probeer het zelf uit

Vaste navigatiebalk

Houd de navigatiebalk aan de top of onderkant van de pagina, zelfs als de gebruiker door de pagina scrolt:

Vast aan de bovenkant

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

Probeer het zelf uit

Vast aan de onderkant

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Probeer het zelf uit

Opmerking:Vaste positie kan op mobiele apparaten mogelijk niet correct werken.

Grijze horizontale navigatiebalk

Voorbeeld van een grijze horizontale navigatiebalk met fijn grijze randen

Voorbeeld

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

Probeer het zelf uit

Adhesieve navigatiebalk

voeg toe aan <ul> positie: sticky;om een adhesieve navigatiebalk te maken.

Adhesieve elementen schakelen tussen relatief en vast op basis van de scrollpositie. Het is relatief geplaatst, totdat het de gegeven offsetpositie in het viewport bereikt - waarna het 'geplakt' wordt op de juiste positie (bijvoorbeeld position:fixed).

Voorbeeld

ul {
  positie: -webkit-sticky; /* Safari */
  positie: sticky;
  top: 0;
}

Probeer het zelf uit

Opmerking:Internet Explorer, Edge 15 en oudere versies ondersteunen geen sticky positioning. Safari vereist de -webkit- voorvoegsel (zie het voorbeeld hierboven). Je moet ook boven,rechts,onder of links Ten minste één, zodat de sticky positioning werkt.

Meer voorbeelden

Responsieve bovenste navigatie
Hoe je een responsieve bovenste navigatie kunt maken met CSS media queries.
Responsieve zijbalk navigatie
Hoe je een responsieve zijbalk navigatie kunt maken met CSS media queries.
Dropdown navigatielijn
Hoe je een dropdown-menu toevoegt aan een navigatielijn.