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.
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.
CSS
Copy and paste following stylesheet on page for styling popup dropdown menu toggle.
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.
Visit official repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.
