Sidenav

Info

A fixed vertical menu that is not visible on smaller screens, the open button then appears and clicking on it moves the menu to the right again. This menu can also be set to the 4 breakpoints. The breakpoints are: sm(smartphone), md(tabled), lg(laptop/PC) and xl(PC).

<button class="sidenav-open md"><i class="icon icon-menu"></i></button>
<nav class="sidenav md">
  <button class="sidenav-close"><i class="icon icon-cancel"></i></button>
  <img alt="" src=""/>
  <ul>
    <li><span>Tekst</span></li>
    <li><a class="active" href="">Link</a></li>
    <li><a class="has-child" href="javascript:void(0);">Link</a>
      <ul>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
      </ul>
    </li>
    <li><a href="">Link</a></li>
  </ul>
</nav>

<div class="container-sidenav md">
  <header class="header">
    <div class="header-col-md">
      <img alt="" src=""/>
    </div>
    <div class="header-col-md">
     <p class="header-text">Tekst</p>
     <p class="header-subtext">Tekst</p>
    </div>
  </header>

  <div class="container">
    <h4 class="text-center">Inhoud</h4>
    <p></p>
    <p></p>
  </div>
      
  <footer class="footer">
    <div class="footer-col-md">
      <p>lorem</p>
    </div>
    <div class="footer-col-md">
      <p>lorem</p>
    </div>
    <div class="footer-col-md">
      <p><a href="">lorem</a></p>
    </div>
  </footer>
</div>

Sidenav colors

Black

sidenav-black

<button class="sidenav-open md sidenav-black"><i class="icon icon-menu"></i></button>
<nav class="sidenav md sidenav-black">

White

sidenav-white

<button class="sidenav-open md sidenav-white"><i class="icon icon-menu"></i></button>
<nav class="sidenav md sidenav-white">

Gray

sidenav-gray

<button class="sidenav-open md sidenav-gray"><i class="icon icon-menu"></i></button>
<nav class="sidenav md sidenav-gray">

Blue

sidenav-blue

<button class="sidenav-open md sidenav-blue"><i class="icon icon-menu"></i></button>
<nav class="sidenav md sidenav-blue">

Green

sidenav-green

<button class="sidenav-open md sidenav-green"><i class="icon icon-menu"></i></button>
<nav class="sidenav md sidenav-green">

Teal

sidenav-teal

<button class="sidenav-open md sidenav-teal"><i class="icon icon-menu"></i></button>
<nav class="sidenav md sidenav-teal">

Red

sidenav-red

<button class="sidenav-open md sidenav-red"><i class="icon icon-menu"></i></button>
<nav class="sidenav md sidenav-red">

Yellow

sidenav-yellow

<button class="sidenav-open md sidenav-yellow"><i class="icon icon-menu"></i></button>
<nav class="sidenav md sidenav-yellow">

Orange

sidenav-orange

<button class="sidenav-open md sidenav-orange"><i class="icon icon-menu"></i></button>
<nav class="sidenav md sidenav-orange">

Brown

sidenav-brown

<button class="sidenav-open md sidenav-brown"><i class="icon icon-menu"></i></button>
<nav class="sidenav md sidenav-brown">

Purple

sidenav-purple

<button class="sidenav-open md sidenav-purple"><i class="icon icon-menu"></i></button>
<nav class="sidenav md sidenav-purple">

Pink

sidenav-pink

<button class="sidenav-open md sidenav-pink"><i class="icon icon-menu"></i></button>
<nav class="sidenav md sidenav-pink">

Let's have fun