Zijmenu naast de pagina

Voor het plaatsen van een zijmenu naast de pagina.

Gebruik deze weergave als de inhoud van het zijmenu niet over de content van de pagina gaat maar website breed is. Zoals bijvoorbeeld hoofdnavigatie.

Gaat de inhoud van het zijmenu over de inhoud van de content. En hoort het bij de content. Gebruik dan: Zijmenu binnen de pagina

Benodigde stappen

  1. Voeg de class sidemenu toe aan de body.
  2. Voeg direct binnen de body een nav toe met de gewenste inhoud.
  3. Groepeer de overige content in een enkel element indien dat nog niet gebeurd is. Bijvoorbeeld: div. Voor meer informatie zie: Voorbeeld sidemenu structuur.

Aandachtspunten

  • Deze versie is een zijmenu zonder inklapfunctionaliteit. Deze versie maakt geen gebruik van JavaScript.

Voorbeelden

Zijmenu

Visueel voorbeeld

Zie het zijmenu van deze pagina.

HTML-voorbeeld

<body class="sidemenu">
  <nav>
    <ul>
      <li><a href="/">Voorbeeld link 1</a></li>
      <li><a href="/">Voorbeeld link 2</a></li>
      <li><a href="/">Voorbeeld link 3</a></li>
      <li><a href="/">Voorbeeld link 4</a></li>
    </ul>
  </nav>
  <div class="page-content">
    <header class="page-header">
      <div>
        <nav>
          <div class="collapsing-element">
            <ul>
              <li><a href="/">Home</a></li>
            </ul>
          </div>
        </nav>
      </div>
    </header>
    <main>
      <article class="visually-grouped">
        <div><section>Main</section></div>
      </article>
    </main>
    <footer>Footer</footer>
  </div>
</body>

HTML-voorbeeld structuur

<body class="sidemenu">

  <nav>
    <!-- Zijmenu content -->
  </nav>

  <div class="page-content">
    <!-- Overige pagina content -->
  </div>

</body>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld

@use "@minvws/manon/sidemenu";