Direct naar de inhoud

Handboek HTML5 en CSS3HTML en CSS van <a> tot z-index

Uitklapmenu met HTML en CSS

Door Peter Doolaard —

Op het kleine scherm van een mobiel apparaat wordt het navigatiemenu meestal ingeklapt om ruimte te besparen. Door op een pictogram of tekst te tikken kan het het menu worden geopend en gesloten. Zo’n aan-uitschakelaar (toggle) wordt in apps sowieso gerealiseerd met scripting en in ‘gewone’ HTML-pagina’s kan dat natuurlijk ook, maar het is ook mogelijk zonder JavaScript. Deze methode werkt met het in- en uitschakelen van een onzichtbaar selectievakje (checkbox) en de CSS-pseudoklasse :checked.

De code van het menu ziet er zo uit:

<nav>
    <input id="menu-toggle" type="checkbox">
    <label for="menu-toggle">menu</label>
    <ul>
        <li><a>Home</a></li>
        <li><a href="code.php">Code uit boek</a></li>
        <li><a href="errata.php">Verbeteringen</a></li>
        <li><a href="blog/index.php">Nieuws en tips</a></li>
        <li><a href="boeken.php">Meer boeken</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>

De menuknop is een selectievakje dat wordt gemaakt met <input id="menu-toggle" type="checkbox">. Dat vakje wordt echter met CSS verborgen en dan is er niets meer om op te klikken. Dat wordt opgelost met een label dat wel zichtbaar is: <label for="menu-toggle">menu</label>. In dit voorbeeld is de tekst menu de zichtbare knop, maar dat zou ook een hamburgerpictogram kunnen zijn of een ander symbool dat gebruikers herkennen als menuknop. Label en knop zijn met elkaar verbonden door de id. Daardoor beïnvloedt een klik/tik op het label ook het selectievakje.

Een selectievakje staat aan of uit. Als het aanstaat is het ‘checked’. Die eigenschap kan worden uitgelezen met JavaScript, maar CSS kent ook de pseudoklasse :checked. En dat biedt mogelijkheden voor een schakelaar zonder scripting. Het werk wordt gedaan in het CSS-bestand.

Eerst wordt het selectievakje verborgen:

nav input[type="checkbox"] {
    display: none;
}

Bij het openen van de pagina is het menu onzichtbaar. Om dat te bereiken wordt de lijst verborgen:

nav ul {
    display: none;
}

Als op het label wordt getikt, krijgt het selectievakje de status checked. Dat is het teken om de lijst zichtbaar te maken:

nav input[type="checkbox"]:checked ~ ul {
    display: block;
}

Hier staat: selecteer het element <ul> dat op hetzelfde niveau staat als het element <input> met als attribuut type=checkbox waarvan de status checked is en die beide afstammen van het element <nav>. De siblingselector ~ is hier essentieel.

Meer is er niet nodig om de techniek te laten werken. De rest is opmaak.

Tags: css


Reageer op dit artikel

* Vul a.u.b. alle velden in.