Create Awesome Hamburger Popup Menu Using jQuery And CSS3

by Posted on

If you want to add a fancy, multi-level, user- and mobile-friendly popup/dropdown menu with a hamburger toggle button on your website then here i am going to share simple code snippet written in jQuery and CSS for creating Awesome Hamburger Popup Menu.
Hamburger Popup Menu Using jQuery And CSS3

Integrate Awesome Hamburger Popup Menu

Libraries

First include latest jQuery core library on page.

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



HTML

Create the HTML for the Hamburger Popup Menu.

<nav>
 <span id='menu-ctn'>
  <li class='menu-bars'></li>
  </span> </nav>
<span id='menu-cnt'>
<li class='menu-item'> <a href='http://iamrohit.in' target="_blank" class='item-link'>Home</a> </li>
<hr/>
<li class='menu-item'><a href='http://iamrohit.in/rohit-kumar' target="_blank" class='item-link'>About</a></li>
<hr/>
<li class='menu-item'>Tools<br/>
  <a href='https://twitter-trends.iamrohit.in' target="_blank" class='sub-link'>Twitter Trends Lookup</a><br/>
  <a href='http://typing.iamrohit.in/english2hindi' target="_blank" class='sub-link'>English2Hindi Typing</a><br/>
  <a href='http://lab.iamrohit.in/online/tools/ip_address_locator' target="_blank" class='sub-link'>IP Locator</a><br/>
  <a href='https://agecalculator.me' target="_blank" class='sub-link'>Age Calculator</a><br/>
</li>
</span>
</nav>



CSS

Copy and paste following stylesheet on page for styling popup dropdown menu toggle.

<style>
nav {
  height: 60px;
  background: var(--coal);
}
#menu-ctn {
  position: relative;
  top: 10px;
  margin: 0 16px;
  height: 40px;
  background: var(--apple);
  width: 44px;
  display: inline-block;
}
 
a { cursor: pointer; }
 
#menu-cnt {
  opacity: 0;
  transform: translate(16px, -10px) scale(0.7);
  background: #FFF;
  padding: 20px;
  box-shadow: 1px 2px 1px var(--coal);
  visibility: none;
  display: inline-block;
}
 
.menu-bars {
  height: 4px;
  width: 30px;
  list-style: none;
  background: var(--snow);
  margin: 0 7px;
  position: relative;
  top: 18px;
  transition: 0.4s all ease-in;
}
 
.menu-item, a.item-link {
  list-style: none;
  text-decoration: none;
  z-index: 1;
  background: transparent;
  width: 100%;
  display: inline-block;
}
 
a.sub-link {
  padding: 5px 20px;
  display: inline-block;
  width: 100%;
  text-decoration: none;
}
 
a.sub-link:nth-of-type(1) { margin-top: 12px; }
 
hr { border: 1px solid var(--coal); }
 
.crossed { background: var(--apple); }
 
.dropped {
  opacity: 1 !important;
  transform: translate(16px, -10px) !important;
  visibility: visible !important;
}
 
.menu-bars::before, .menu-bars::after {
  content: '';
  position: absolute;
  height: 4px;
  width: 30px;
  list-style: none;
  background: var(--snow);
}
 
.menu-bars::before { transform: translateY(-10px); }
 
.menu-bars::after { transform: translateY(10px); }
 
.crossed::before { animation: rotate-top-bar 0.4s forwards; }
 
.crossed::after { animation: rotate-bottom-bar 0.4s forwards; }
 
.hamburger::before { animation: rotate-top-bar-2 0.4s reverse; }
 
.hamburger::after { animation: rotate-bottom-bar-2 0.4s reverse; }
 
/* EVENT HANDLERS */
 
.menu-item:hover, a.item-link:hover { color: var(--coal); }
 
a.sub-link:hover {
  background: var(--snow);
  box-shadow: -4px 0 0 var(--apple);
}
 
/* ANIMATION KEYFRAMES */
@keyframes 
rotate-top-bar {  40% {
 transform: translateY(0);
}
 100% {
 transform: translateY(0) rotate(45deg);
}
}
@keyframes 
rotate-bottom-bar {  40% {
 transform: translateY(0);
}
 100% {
 transform: translateY(0) rotate(-45deg);
}
}
@keyframes 
rotate-top-bar-2 {  40% {
 transform: translateY(0);
}
 100% {
 transform: translateY(0) rotate(45deg);
}
}
@keyframes 
rotate-bottom-bar-2 {  40% {
 transform: translateY(0);
}
 100% {
 transform: translateY(0) rotate(-45deg);
}
}
</style>



JS

Write the jQuery code to make your Hamburger Popup Menu actionable.

<script >
$(() => {
  const menu = $('#menu-ctn'),                   bars = $('.menu-bars'),                   items = $('.menu-item'),                 content = $('#menu-cnt');
 
  let firstClick = true,                       menuClosed = true;
 
  let handleMenu = event => {
    if(!firstClick) {
      bars.toggleClass('crossed hamburger');
    } else {
      bars.addClass('crossed');
      firstClick = false;
    }  
 
    menuClosed = !menuClosed;
    content.toggleClass('dropped');
    event.stopPropagation();
  };
 
  menu.on('click', event => {
    handleMenu(event);
  });
 
  $('body').not('#menu-cnt, #menu-ctn').on('click', event => {
    if(!menuClosed) handleMenu(event);
  });
 
  $('#menu-cnt, #menu-ctn').on('click', event => event.stopPropagation());
});
 
</script>

See live demo and download source code.

DEMO | DOWNLOAD

Visit official repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Published by admin