Animated Slideout Sidebar Menu with CSS3 & JavaScript

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	Drawerr
Author:	Ferdie Sletering
Licence:	MIT Licence
Published:	January 19, 2024
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

Demo Download

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>

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.