jQuery/CSS3 Based Expanding Hamburger Menu - Shy Menu
File Size: | 2.2 KB |
---|---|
Views Total: | 6319 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.