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


Introduction

With CSS framework you have access to four possibilities to add a sidenav to your site.
You have both the sidenav and the sitenav collapse both left and right.
A sidenav is a menu that is not visible and appears when you click on a menu button.
The sidenav collapse is a sidenav that is always visible on the large screens and is behaving like a normal sidenav on the smaller screens.
The basic colors are black and gray but can easily be adjusted with the color classes of css framework.


Click on the Class name to copy it.

sidenav Main class for the sidenav block
sideclick Class for close button and open button click
close-btn Class for close button icon
sidenav-icon Class for open button icon
colapse Class to make the collapsible sidenav
acc Class for click event of the dropdown buttons
dropbtn Class for making the dropdown button
down-icon Class for making the dropdown icon
drop-container Class for the dropdown container
text Class to put plain text in the sidenav
right-nav Class that make's the right sidenav
main Class that make's the main area for the page content
overlay Class that creates a dark overlay when the menu opens

Example Sidenav Left pc - laptop

Example mobile


Example code:

<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="#">About us</a>
  <a href="#">Our work</a>
  <a class="acc dropbtn" href="javascript:void(0)">Our stores<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>

Example Sidenav Right pc - laptop

Example mobile


Example code:

<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="#">About us</a>
  <a href="#">Our work</a>
  <a class="acc dropbtn" href="javascript:void(0)">Our stores<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>

Example Sidenav Collapse Left pc - laptop

Example mobile


Example code:

<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="#">About us</a>
  <a href="#">Our work</a>
  <a class="acc dropbtn" href="javascript:void(0)">Our stores<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>

Example Sidenav Collapse Right pc - laptop

Example mobile


Example code:

<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="#">About us</a>
  <a href="#">Our work</a>
  <a class="acc dropbtn" href="javascript:void(0)">Our stores<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