flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Sidenav


Introductie

Met CSS-framework heb je vier mogelijkheden om een sidenav toe te voegen aan je site.
Je hebt zowel de sidenav en de sidenav collapse beiden zowel links als rechts op je scherm
Een sidenav is een menu dat niet zichtbaar is en verschijnt wanneer je op een menuknop klikt.
De sidenav collapse is een sidenav die altijd zichtbaar is op de grote schermen en zich op de kleinere schermen gedraagt als een normale sidenav.
De basiskleuren zijn zwart en grijs maar kunnen eenvoudig worden aangepast met de kleur classes van CSS-framework.


Klik op de Class naam om deze te kopiƫren.

sidenav Hoofd class voor het sidenav-blok
sideclick Klik class voor de open en sluit knoppen
close-btn Class voor de sluiten knop pictogram
sidenav-icon Class voor de open knop pictogram
colapse Class om de inklapbare(collapse) sidenav te maken
acc Class voor het klik gebeuren van de dropdown knoppen
dropbtn Class voor het maken van de dropdown knop
down-icon Class voor het maken van het dropdown pictogram
drop-container Class voor de dropdown container
text Class om platte tekst in de sidenav te voegen
right-nav Class die de rechter sidenav maakt
main Class die het hoofdgebied voor de pagina inhoud vormt
overlay Class die een donkere overlay maakt wanneer het menu wordt geopend

Voorbeeld Sidenav Left pc - laptop

Voorbeeld mobiel


Voorbeeldcode:

<div class="sidenav">
  <a class="sideclick close-btn" href="javascript:void(0)">X</a>
  <img alt="logo" class="image" src="../images/zomer1.jpg" />
  <div class="text">Menu</div>
  <a href="#">Home</a>
  <a href="#">Over ons</a>
  <a href="#">Ons werk</a>
  <a class="acc dropbtn" href="javascript:void(0)">Onze winkels<span class="down-icon"></span></a>
    <div class="drop-container">
      <a href="#">Amsterdam</a>
      <a href="#">Rotterdam</a>
    </div>
  <a href="#">Contact</a>
</div>
<div class="overlay" id="Overlay"></div>

<div class="sideclick sidenav-icon"></div>
<div class="container center">
  <h1>Header</h1>
</div>

Voorbeeld Sidenav Right pc - laptop

Voorbeeld mobiel


Voorbeeldcode:

<div class="sidenav right-nav">
  <a class="sideclick close-btn" href="javascript:void(0)">X</a>
  <img alt="logo" class="image" src="../images/zomer1.jpg" />
  <div class="text">Menu</div>
  <a href="#">Home</a>
  <a href="#">Over ons</a>
  <a href="#">Ons werk</a>
  <a class="acc dropbtn" href="javascript:void(0)">Onze winkels<span class="down-icon"></span></a>
    <div class="drop-container">
      <a href="#">Amsterdam</a>
      <a href="#">Rotterdam</a>
    </div>
  <a href="#">Contact</a>
</div>
<div class="overlay" id="Overlay"></div>

<div class="sideclick sidenav-icon"></div>
<div class="container center">
  <h1>Header</h1>
</div>

Voorbeeld Sidenav Collapse Left pc - laptop

Voorbeeld mobiel


Voorbeeldcode:

<div class="sidenav colapse">
  <a class="sideclick close-btn" href="javascript:void(0)">X</a>
  <img alt="logo" class="image" src="../images/zomer1.jpg" />
  <div class="text">Menu</div>
  <a href="#">Home</a>
  <a href="#">Over ons</a>
  <a href="#">Ons werk</a>
  <a class="acc dropbtn" href="javascript:void(0)">Onze winkels<span class="down-icon"></span></a>
    <div class="drop-container">
      <a href="#">Amsterdam</a>
      <a href="#">Rotterdam</a>
    </div>
  <a href="#">Contact</a>
</div>
<div class="overlay" id="Overlay"></div>

<div class="main">
  <div class="sideclick sidenav-icon colapse"></div>
  <div class="container center">
    <h1>Header</h1>
  </div>
</div>

Voorbeeld Sidenav Collapse Right pc - laptop

Voorbeeld mobiel


Voorbeeldcode:

<div class="sidenav colapse right-nav">
  <a class="sideclick close-btn" href="javascript:void(0)">X</a>
  <img alt="logo" class="image" src="../images/zomer1.jpg" />
  <div class="text">Menu</div>
  <a href="#">Home</a>
  <a href="#">Over ons</a>
  <a href="#">Ons werk</a>
  <a class="acc dropbtn" href="javascript:void(0)">Onze winkels<span class="down-icon"></span></a>
    <div class="drop-container">
      <a href="#">Amsterdam</a>
      <a href="#">Rotterdam</a>
    </div>
  <a href="#">Contact</a>
</div>
<div class="overlay" id="Overlay"></div>

<div class="main right-nav">
  <div class="sideclick sidenav-icon colapse"></div>
  <div class="container center">
    <h1>Header</h1>
  </div>
</div>


© Copyright by Web Henkie
All right reserved
Webmaster