Zijmenu

Bij lange documenten of pagina's kan een zijmenu gebruikt worden om het navigeren voor de gebruiker toegankelijk en overzichtelijk te houden.

Aandachtspunten:

Algemene structuur opzetten:
1. Voeg de class sidemenu toe aan de main.
2. Voeg de nav toe direct binnen de main.
3. Groepeer de content binnen de main zo dat er twee elementen in staan. 1. de nav en 2. de overige content binnen een <div>. Dit zorgt ervoor dat de main de zijbalknavigatie en de content van de pagina naast elkaar kan tonen. Zie onderstaand voorbeeld voor meer informatie.
Het zijmenu is optioneel te verrijken met JavaScript, zodat het in- en uitgeklapt kan worden. Zie Voorbeeld inklapbaar zijmenu.

Voorbeeld

Visueel voorbeeld zijmenu:

Lorem ipsum

Dolor set amet conseqtetur adepicing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lacus ac turpis convallis vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas ut fringilla tortor. Nulla ultrices enim sit amet tellus venenatis, lacinia dapibus risus auctor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus accumsan dui sed diam placerat, quis ultrices enim viverra.
Aenean posuere enim a hendrerit viverra.
Phasellus eu justo ac orci tempus bibendum eu in est.

Html-voorbeeld:

                        
<main class="sidemenu background-color-offset">
    <nav>
        <!-- voeg hier de content van de zijnavigatie toe. Bijvoorbeeld een lijst met links: -->
    </nav>

    <div>
        <!-- Voeg hier de overige content van het document toe. -->
    </div>
</main>

Voorbeeld inklapbaar zijmenu

Het is mogelijk het zijmenu te verrijken met een sluit- en open-knop.

Let op: Deze functionaliteit maakt gebruik van JavaScript.
- Voeg <script defer src="./pad/naar/sidemenu.min.js"></script> toe aan de <head> van de site.
- De knop wordt automatisch toegevoegd. Deze hoeft dus niet handmatig in de html opgenomen te worden.
- Zonder JavaScript wordt de knop niet toegevoegd en wordt het zijmenu getoont zonder deze in te klappen.
De sluit- en open-knop is een icoonknop zonder tekst. Voeg de knoptekst wel altijd toe voor screenreader gebruikers.
- Doe dit middels de data-open-label en data-close-label attributen op de <nav>. Zie het Html-voorbeeld hieronder.
- Zorg ervoor dat de knoptekst in dezelfde taal is als de rest van het document.

Visueel voorbeeld:

Lorem ipsum

Dolor set amet conseqtetur adepicing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus accumsan dui sed diam placerat, quis ultrices enim viverra.
Aenean posuere enim a hendrerit viverra.
Phasellus eu justo ac orci tempus bibendum eu in est.

Html-voorbeeld:

                        
<main class="sidemenu background-color-offset">
    <nav data-open-label="Zijbalknavigatie" data-close-label="Sluit zijbalknavigatie">
        <!-- voeg hier de content van de zijnavigatie toe. Bijvoorbeeld een lijst met links: -->
        <ul>
            <li><a href="">Voorbeeld link</a></li>
        </ul>
    </nav>
    <div>
        <!-- Voeg hier de overige content van het document toe. -->
    </div>
</main>

Voorbeeld uitklapbaar zijmenu

Het menu begint standaard uitgeklapt.

Het is ook mogelijk het menu ingeklapt te laten beginnen.
Voeg hiervoor de class sidemenu-closed toe aan de <main>.
Let op: Deze functionaliteit maakt gebruik van JavaScript.
- Zie Voorbeeld inklapbaar zijmenu.
- Indien het JavaScript niet geladen kan worden, kan het menu niet uitgeklapt worden.

Visueel voorbeeld:

Lorem ipsum

Dolor set amet conseqtetur adepicing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus accumsan dui sed diam placerat, quis ultrices enim viverra.
Aenean posuere enim a hendrerit viverra.
Phasellus eu justo ac orci tempus bibendum eu in est.

Html-voorbeeld:

                        
<main class="sidemenu sidemenu-closed background-color-offset">
    <nav data-open-label="Zijbalknavigatie" data-close-label="Sluit zijbalknavigatie">
        <!-- voeg hier de content van de zijnavigatie toe. Bijvoorbeeld een lijst met links: -->
        <ul>
            <li><a href="">Voorbeeld link</a></li>
        </ul>
    </nav>
    <div>
        <!-- Voeg hier de overige content van het document toe. -->
    </div>
</main>