CSS horizontale navigatiebalk
Horizontale navigatiebalk
Er zijn twee manieren om een horizontale navigatiebalk te maken. Inline of zwevende lijstitems gebruiken .
Inline lijstitems
Een manier om een horizontale navigatiebalk te bouwen is om de <li>-elementen als inline te specificeren, naast de "standaard" code van de vorige pagina:
Voorbeeld
li
{
display: inline;
}
Voorbeeld uitgelegd:
display: inline;- Standaard zijn <li>-elementen blokelementen. Hier verwijderen we de regeleinden voor en na elk lijstitem om ze op één regel weer te geven
Zwevende lijstitems
Een andere manier om een horizontale navigatiebalk te maken, is door de <li>-elementen te laten zweven en een lay-out voor de navigatielinks op te geven:
Voorbeeld
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
Voorbeeld uitgelegd:
float: left;- Gebruik float om blokelementen naast elkaar te laten zwevendisplay: block;- Hiermee kunnen we opvulling specificeren (en hoogte, breedte, marges, etc. als je wilt)padding: 8px;- Specificeer wat opvulling tussen elk <a> element, om ze er goed uit te laten zienbackground-color: #dddddd;- Voeg een grijze achtergrondkleur toe aan elk <a> element
Tip: voeg de achtergrondkleur toe aan <ul> in plaats van elk <a>-element als je een achtergrondkleur over de volledige breedte wilt:
Voorbeeld
ul
{
background-color: #dddddd;
}
Voorbeelden van horizontale navigatiebalk
Maak een eenvoudige horizontale navigatiebalk met een donkere achtergrondkleur en verander de achtergrondkleur van de links wanneer de gebruiker de muis eroverheen beweegt:
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;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
}
Actieve/huidige navigatielink
Voeg een "actieve" klasse toe aan de huidige link om de gebruiker te laten weten op welke pagina hij/zij zich bevindt:
Voorbeeld
.active {
background-color: #04AA6D;
}
Links uitlijnen
Links uitlijnen door de lijstitems naar rechts te laten zweven ( float:right;):
Voorbeeld
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul>
Grensverdelers
Voeg de border-righteigenschap toe aan <li> om scheidingslijnen voor links te maken:
Voorbeeld
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Vaste navigatiebalk
Zorg ervoor dat de navigatiebalk boven of onder aan de pagina blijft, zelfs wanneer de gebruiker door de pagina scrolt:
Vaste top
ul {
position: fixed;
top: 0;
width: 100%;
}
Vaste bodem
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Opmerking: de vaste positie werkt mogelijk niet correct op mobiele apparaten.
Grijze horizontale navigatiebalk
Een voorbeeld van een grijze horizontale navigatiebalk met een dunne grijze rand:
Voorbeeld
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Sticky Navbar
Voeg toe position: sticky;aan <ul> om een plakkerige navigatiebalk te maken.
Een plakkerig element schakelt tussen relatief en vast, afhankelijk van de schuifpositie. Het wordt relatief gepositioneerd totdat een bepaalde offsetpositie wordt bereikt in de viewport - dan "plakt" het op zijn plaats (zoals positie: vast).
Voorbeeld
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Opmerking: Internet Explorer ondersteunt geen plakkerige positionering. Safari vereist een -webkit- prefix (zie voorbeeld hierboven). U moet ook ten minste één van top, right, bottomof specificeren leftom plakkerige positionering te laten werken.
Meer voorbeelden
Responsieve Topnav
Hoe CSS-mediaquery's te gebruiken om een responsieve topnavigatie te maken.
Responsieve Sidenav
CSS-mediaquery's gebruiken om een responsieve zijnavigatie te maken.
Dropdown-navigatiebalk
Een vervolgkeuzemenu toevoegen in een navigatiebalk.
Ooit gehoord van W3Schools Spaces ? Hier kunt u uw website helemaal opnieuw maken of een sjabloon gebruiken en deze gratis hosten.
Ga gratis aan de slag* geen kredietkaart nodig