Sliding Drawer Menu In Pure CSS

Preview:

Description:

A PURE CSS/CSS3 library used to create Android app-style off-screen sliding drawers that support all 4 directions (top, bottom, right, left). Based on IcoMoon icons and CSS3 transition & transform properties.

How to use it:

Load the main CSS file in the header of the webpage and we’re ready to go.

<link rel="stylesheet" href="dist/css/styles.css">

Create the off-screen drawer menu with a checkbox based menu toggle button in the page.

<div class="sliding--menu__wrapper">
  <input type="checkbox" id="navigation">        
  <label id="hamburger--icon" for="navigation">
    <span class="icon-menu"></span>
  </label>      
  <nav>
    <ul>   
      <li>
        <a href="#">Menu 1</a>
        <a href="#">Menu 2</a>
        <a href="#">Menu 3</a>
      </li>
    </ul>
  </nav>
  
  <div class="obfuscator">
  </div>       
   
</div>

By default, the drawer menu will slide out from the left edge of the screen when toggled. To change the default position, just add the following CSS classes to the top container.

<div class="sliding--menu__wrapper slide--bottom">
  Bottom
</div>
<div class="sliding--menu__wrapper slide--top">
  Top
</div>
<div class="sliding--menu__wrapper slide--right">
  Right
</div>