Youtube-style Left Side Menu with jQuery and CSS3

A cool, animated jQuery & CSS3 side navigation that is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again.

How to use it:

1. Create a side menu from a nav list.

<nav class="dr-menu">
  <div class="dr-trigger"> <a class="dr-label">Menu</a> </div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

2. The CSS/CSS3 styles for the side menu.

.dr-menu {
  width: 100%;
  max-width: 400px;
  min-width: 300px;
  position: relative;
  font-size: 1.3em;
  line-height: 2.5;
  font-weight: 400;
  color: #fff;
  padding-top: 2em;
}

.dr-menu > div {
  cursor: pointer;
  position: absolute;
  width: 100%;
  z-index: 100;
}

.dr-menu > div .dr-label {
  padding-left: 3em;
  position: relative;
  display: block;
  color: #673;
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 2.75;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.dr-menu.dr-menu-open > div .dr-label {
  -webkit-transform: translateY(-90%);
  -moz-transform: translateY(-90%);
  -ms-transform: translateY(-90%);
  transform: translateY(-90%);
}

.dr-menu ul {
  padding: 0;
  margin: 0 3em 0 0;
  list-style: none;
  opacity: 0;
  position: relative;
  z-index: 0;
  pointer-events: none;
  -webkit-transition: opacity 0s linear 205ms;
  -moz-transition: opacity 0s linear 205ms;
  transition: opacity 0s linear 205ms;
}

.dr-menu.dr-menu-open ul {
  opacity: 1;
  z-index: 200;
  pointer-events: auto;
  -webkit-transition: opacity 0s linear 0s;
  -moz-transition: opacity 0s linear 0s;
  transition: opacity 0s linear 0s;
}

.dr-menu ul li {
  display: block;
  margin: 0 0 5px 0;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.dr-menu.dr-menu-open ul li { opacity: 1; }

.dr-menu.dr-menu-open ul li:nth-child(2) {
  -webkit-transition-delay: 35ms;
  -moz-transition-delay: 35ms;
  transition-delay: 35ms;
}

.dr-menu.dr-menu-open ul li:nth-child(3) {
  -webkit-transition-delay: 70ms;
  -moz-transition-delay: 70ms;
  transition-delay: 70ms;
}

.dr-menu.dr-menu-open ul li:nth-child(4) {
  -webkit-transition-delay: 105ms;
  -moz-transition-delay: 105ms;
  transition-delay: 105ms;
}

.dr-menu.dr-menu-open ul li:nth-child(5) {
  -webkit-transition-delay: 140ms;
  -moz-transition-delay: 140ms;
  transition-delay: 140ms;
}

.dr-menu.dr-menu-open ul li:nth-child(6) {
  -webkit-transition-delay: 175ms;
  -moz-transition-delay: 175ms;
  transition-delay: 175ms;
}

.dr-menu.dr-menu-open ul li:nth-child(7) {
  -webkit-transition-delay: 205ms;
  -moz-transition-delay: 205ms;
  transition-delay: 205ms;
}

.dr-menu ul li a {
  display: inline-block;
  padding: 0 20px;
  color: #fff;
}

.dr-menu ul li a:hover { color: #673; }

3. Load the latest version of jQuery library from a CDN.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>

4. The JavaScript to active the side menu.

var YTMenu = (function() {

  function init() {   
    [].slice.call( document.querySelectorAll( '.dr-menu' ) ).forEach( function( el, i ) {

      var trigger = el.querySelector( 'div.dr-trigger' ),
        icon = trigger.querySelector( 'span.dr-icon-menu' ),
        open = false;
      trigger.addEventListener( 'click', function( event ) {
        if( !open ) {
          el.className += ' dr-menu-open';
          open = true;
        }
      }, false );
      icon.addEventListener( 'click', function( event ) {
        if( open ) {
          event.stopPropagation();
          open = false;
          el.className = el.className.replace(/\bdr-menu-open\b/,'');
          return false;
        }
      }, false );
    });
  }
  init();
})();

---

This awesome jQuery plugin is developed by romswellparian. For more Advanced Usages, please check the demo page or visit the official website.