jQuery/CSS3 Based Expanding Hamburger Menu - Shy Menu

Shy Menu is a super tiny jQuery script to create a hamburger toggle icon that expands into a side menu panel with CSS3 transitions.

How to use it:

1. The Html to create a corner menu with a hamburger toggle.

<div class="shy-menu">
  <a class="shy-menu-hamburger">
    <span class="layer top"></span>
    <span class="layer mid"></span>
    <span class="layer btm"></span>
    </a>
  <div class="shy-menu-panel">
    <ul>
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
    </ul>
  </div>
</div>

<div class="menu open">
  <a class="hamburger">
    <span class="layer top"></span>
    <span class="layer mid"></span>
    <span class="layer btm"></span>
  </a>
</div>

2. The required CSS/CSS3 styles for the shy menu.

* {
  -moz-transition: all .4s cubic-bezier(.1,.7,.3,1);
  -webkit-transition: all .4s cubic-bezier(.1,.7,.3,1);
  -o-transition: all .4s cubic-bezier(.1,.7,.3,1);
  -ms-transition: all .4s cubic-bezier(.1,.7,.3,1);
  transition: all .4s cubic-bezier(.1,.7,.3,1);
}

ul {
  list-style: none;
  margin: 0 0 0 15px;
  padding: 0;
}

.shy-menu { 
  display: block;
  height: 35px;
  padding: 5px;
  width: 35px;
  
  background-color: rgba(33,40,44,.1);
  border-bottom-right-radius: 10px;
  color: #fff;
}
.shy-menu.is-open,
.shy-menu:hover { 
  background-color: rgba(33,40,44,1);
}

.shy-menu.is-open {
  height: 150px;
  width: 100px;
}

.shy-menu-panel { 
  margin-left: -100px;
}
.is-open .shy-menu-panel { 
  margin-left: 0;
}

3. Style the hamburger toggle and animate it using CSS3 transforms.

.shy-menu-hamburger {
  position: relative;
  left: 0;
  top: 0;
  width: 54px;
  height: 54px;
  display: block;
  overflow: hidden;
  cursor: pointer;
}

.shy-menu-hamburger > .layer {
  background-color: #fff;
  border-radius: 1px;
  display: block;
  height: 2px;
  overflow: hidden;
  position: absolute;
    left: 5px;
  width: 18px;
}

.shy-menu-hamburger .layer.top { top: 9px; }
.is-open .shy-menu-hamburger .layer.top { 
  top: 17px;
  left: 5px;
  transform: rotate(45deg);
}
.shy-menu-hamburger .layer.mid { top: 16px; }
.is-open .shy-menu-hamburger .layer.mid {
  opacity: 0;
  left: 0;
}
.shy-menu-hamburger .layer.btm { top: 23px; }
.is-open .shy-menu-hamburger .layer.btm { 
  top: 17px;
  left: 5px;
  transform: rotate(-45deg);
}

4. Load the latest version of jQuery JavaScript library from a CDN.

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

5. Active the shy menu with the following JavaScript snippets.

$(function() {
  
  initDropDowns($("div.shy-menu"));

});

function initDropDowns(allMenus) {

  allMenus.children(".shy-menu-hamburger").on("click", function() {
    
    var thisTrigger = jQuery(this),
      thisMenu = thisTrigger.parent(),
      thisPanel = thisTrigger.next();

    if (thisMenu.hasClass("is-open")) {

          thisMenu.removeClass("is-open");
      
          jQuery(document).off("click");                                 
          thisPanel.off("click");

    } else {      
      
        allMenus.removeClass("is-open");  
      thisMenu.addClass("is-open");
  
      jQuery(document).on("click", function() {
        allMenus.removeClass("is-open");
      });
      thisPanel.on("click", function(e) {
        e.stopPropagation();
      });
    }
    
    return false;
  });
}

---

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