HOME / LAB >

Nice Sidebar Menu

Published: 16/08/2019 Categories: Coding, Javascript Leave a comment

Hello everyone!

This Friday we will share a cool sidebar menu with a custom staggering effect on the menu items. This can be handy for various websites or for responsive menus.

The html is pretty basic, we have a wrapper which will wrap the burger button and some dummy content, and a mobile menu offcanvas wrapper.

<div class="wrapper">
  <button class="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </button>
  <div class="content">
  <h2>Lorem Ipsum</h2><br>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aliquid eum sed nemo adipisci beatae blanditiis mollitia consequatur debitis, magni cupiditate itaque dolor id minus qui molestias voluptatem. Et, ipsam.</p><br>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores rerum, odio possimus voluptatibus id ut quisquam veniam aut quidem eius alias in deserunt assumenda optio cupiditate harum corrupti soluta vitae.</p>
    <br>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aliquid eum sed nemo adipisci beatae blanditiis mollitia consequatur debitis, magni cupiditate itaque dolor id minus qui molestias voluptatem. Et, ipsam.</p><br>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores rerum, odio possimus voluptatibus id ut quisquam veniam aut quidem eius alias in deserunt assumenda optio cupiditate harum corrupti soluta vitae.</p>
</div>
</div>

<div class="sidebar-menu">
  <ul>
    <li><a href="#"><i class="fa fa-archive" aria-hidden="true"></i>Archives</a></li>
    <li><a href="#"><i class="fa fa-video-camera" aria-hidden="true"></i>Videos</a></li>
    <li><a href="#"><i class="fa fa-code" aria-hidden="true"></i>Snippets</a></li>
    <li><a href="#"><i class="fa fa-map-o" aria-hidden="true"></i>Guides</a></li>
  </ul>
</div>

 

Stagger Effect

To create a stagger effect on the menu items, we start with the following styles:

.sidebar-menu li a {
  transition: 300ms;
  opacity: 0;
  transform: translateX(-20px);
}

This means that by default our menu items will be invisible and pushed 20pixels to the left.

The javascript is also fairly simple, on the burger button click, we toggle the class “menu-open” at the body element, and call the function the creates the stagger effect.

var $menuItems = $('.sidebar-menu a');

$('.hamburger').on('click' , function(){
   $('body').toggleClass('menu-open');
   staggerMenuItems();
});

function staggerMenuItems(){  
  $menuItems.each(function(key){
    var $this = $(this);
     setTimeout(function(){
       $this.toggleClass('stagger');
     } , key*200);
  });
}

For the stagger effect, we simply set a timeout with an incremental amount of delay, and inside the timeout we toggle a “stagger” class at the menu items. The stagger class simply changes opacity to 1 and returns the element to the initial position.

.sidebar-menu li a.stagger {
  opacity: 1;
  transform: translateX(0);
}

 

You can see the whole thing in the following pen.

See the Pen Sidebar Menu by cheBandoneon (@cheBandoneon) on CodePen.0

 

That will be all for this Friday!