Animated Slideout Sidebar Menu with CSS3 & JavaScript

The Drawerr is vanilla JavaScript plugin to create multi level side menu. It helps you to make animated slideout sidebar menu. The menu has animated hamburger toggle button to open & close menu drawer. In side drawer, you can add multiple main items and sub menu.

Further more, the menu can be fully customize with CSS to fit on your needs.

Plugin Overview

Plugin: Drawerr
Author: Ferdie Sletering
Licence: MIT Licence
Published: September 1, 2019
Repository: Fork on GitHub
Dependencies: Polyfill JS (a JavaScript library), Font Awesome 4 and Normalize CSS (Optional)
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 38.3 KB

How to Use Animated Slideout Sidebar Menu

1. Load Polyfill JS, Normalize and Font Awesome CSS (for icons) into your HTML document.

<!-- Polyfills JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.42/polyfill.js"></script>

<!--Normalize CSS-->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<!-- Font Awesome 4-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2. After that, also include Drawerr menu CSS and JavaScript file into your web project.

<!-- Drawerr Menu CSS -->
<link rel="stylesheet" href="dist/drawerr.css">

<!-- Drawerr Menu JS -->
<script src="dist/drawerr.js"></script>

3. Create HTML structure like below for sidebar menu after loading all assets.

<nav id="drawerr" class="drawerr--init">
   <div class="drawerr-container">
      <div class="drawerr-navigation-container"></div>
      <ul>
         <li>
            <a href="#">Cloud services</a>
            <ul>
               <li>
                  <a class="active" href="http://www.google.nl">Amazon AWS</a>
                  <a href="#">Google Cloud</a>
               </li>
               <li><a href="#">Dropbox</a></li>
            </ul>
         </li>
         <li>
            <a href="#">Programming languages</a>
            <ul>
               <li>
                  <a href="#">PHP</a>
                  <ul>
                     <li>
                        <a href="#">Laravel</a>
                     </li>
                  </ul>
               </li>
               <li><a href="#">C#</a></li>
               <li><a href="#">Python</a></li>
               <li><a href="#">C++</a></li>
               <li><a href="#">Ruby</a></li>
               <li><a href="#">Java</a></li>
               <li><a href="#">Rust</a></li>
               <li><a href="#">Haskell</a></li>
               <li>
                  <a href="#">JavaScript</a>
                  <ul>
                     <li>
                        <a href="#">React</a>
                        <ul>
                           <li>
                              <a href="https://www.google.nl">
                              PreReact
                              </a>
                              <a href="#">
                              React Fiber
                              </a>
                           </li>
                        </ul>
                     </li>
                     <li>
                        <a href="#">Vue</a>
                     </li>
                  </ul>
               </li>
            </ul>
         </li>
         <li>
            <a href="#">Get in touch</a>
         </li>
         <li>
            <a href="#">About us</a>
         </li>
      </ul>
   </div>
</nav>

4. Initialize the Drawerr plugin to active the slideout menu.

<script>
    const x = new drawerrMultilevel({
        drawerr: '#drawerr'
    });
</script>