The super simple hamburger toggle. : Mali Maeder
PHOTO BY Mali Maeder

JavaScript - The super simple hamburger toggle

Written by MH in Experimental Playground for SORSO
Published Sat. 24th of Mar 2018 URL JavaScript - The super simple hamburger toggle

A super simple way to toggle and open a hamburger menu using JavaScript.

Here is the most simple piece of javascript code one needs in order to toggle a hamburger to show the hidden menu. Nothing fancy or complicated at all. Just add at the bottom of your page or at the top, which ever works best for you and set the selectors in your code.

(function() {
var burger = document.querySelector('.nav-toggle');
var menu = document.querySelector('.nav-menu');
burger.addEventListener('click', function() {
burger.classList.toggle('is-active');
menu.classList.toggle('is-active');
});
})();

Quick and easy does it. Do note that the code do not work without the proper CSS to show and hide using the display function. But, if you know your CSS you will figure it out.


Tag