Sliding Drawer Menu In Pure CSS

Category: Javascript , Menu & Navigation | April 24, 2017
Views Total:6,652 views
Official Page:Go to website
Last Update:April 24, 2017


Sliding Drawer Menu In Pure CSS


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>
        <a href="#">Menu 1</a>
        <a href="#">Menu 2</a>
        <a href="#">Menu 3</a>
  <div class="obfuscator">

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">
<div class="sliding--menu__wrapper slide--top">
<div class="sliding--menu__wrapper slide--right">

You Might Be Interested In:

Leave a Reply