Hoe te maken: Responsieve navigatiebalk met dropdown-menu
- Vorige pagina Keuzelijst in de zijbalk navigatie
- Volgende pagina Subnavigatiemenu
Leer hoe je een responsieve navigatiebalk met dropdown-menu maakt.
Responsieve bovenste navigatiebalk met dropdown-menu
Maak een responsieve bovenste navigatie met een dropdown-menu
Eerste stap - Voeg HTML toe:
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
Tweede stap - Voeg CSS toe:
/* Voeg een zwarte achtergrondkleur toe aan de topnav */
.topnav {
achtergrondkleur: #333;
overschotten: verborgen;
}
/* Stel de stijl van de links in de navigatiebalk in */
.topnav a {
zeilen: links;
display: block;
kleur: #f2f2f2;
tekst-uitlijning: center;
padding: 14px 16px;
text-decoration: none;
lettergrootte: 17px;
}
/* Voeg een actieve klasse toe om de huidige pagina te benadrukken */
.active {
achtergrondkleur: #04AA6D;
color: wit;
}
/* Verberg op kleine schermen de links om de topnav te openen en te sluiten */
.topnav .icon {
display: none;
}
/* Container van de dropdown-menu - gebruikt voor het positioneren van de inhoud van de dropdown-menu */
.dropdown {
zeilen: links;
overschotten: verborgen;
}
/* Stel de stijl van de knoppen van de dropdown in zodat deze past bij de topnav */
.dropdown .dropbtn {
lettergrootte: 17px;
rand: none;
omlijsting: none;
color: wit;
padding: 14px 16px;
achtergrondkleur: geërven;
lettertype-familie: geërven;
marge: 0;
}
/* Stel de stijl van de inhoud van de dropdown-menu in (standaard is verborgen) */
.dropdown-content {
display: none;
position: absolute;
achtergrondkleur: #f9f9f9;
min- breedte: 160px;
schaduw: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Stel de stijl van de links in de dropdown-menu in */
.dropdown-content a {
float: none;
color: zwart;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Bij het hoveren van de muis, voeg een donkere achtergrond toe aan de links van de topnav en de knoppen van de dropdown */
.topnav a:hover, .dropdown:hover .dropbtn {
achtergrondkleur: #555;
color: wit;
}
/* Bij het hoveren van de muis, voeg een grijs achtergrond aan de links van de dropdown-menu toe */
.dropdown-content a:hover {
achtergrondkleur: #ddd;
color: zwart;
}
/* Toon de dropdownmenu wanneer de muis over de knop van de dropdownmenu wordt gehouden */
.dropdown:hover .dropdown-content {
display: block;
}
/* Bij een schermbreedte kleiner dan 600 pixels worden alle links behalve de eerste ("Home") verborgen. De links moeten het openen en sluiten van de topnavigatie (.icon) mogelijk maken */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* Bij het klikken op het pictogram voegt JavaScript de klasse "responsive" toe aan de topnavigatie. Deze klasse maakt de topnavigatie op kleine schermen beter zichtbaar (links verticaal weergegeven in plaats van horizontaal) */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
Derde stap - Voeg JavaScript toe:
/* Wissel tussen het toevoegen en verwijderen van de klasse "responsive" in de topnavigatie bij het klikken op het pictogram */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
Gerelateerde pagina's
Handleiding:CSS keuzelijst
Handleiding:Hoe een klikbare dropdownmenu te maken
Handleiding:CSS navigatiemenu
Handleiding:Hoe een zijbalk navigatiemenu te maken
- Vorige pagina Keuzelijst in de zijbalk navigatie
- Volgende pagina Subnavigatiemenu
