CSS / JavaScript / LESS / SCSS

Hamburger Menu (Mobile Menu)

Januar 2, 2019

Create a simple & useful mobile menu

Table of contents

HTML
CSS/LESS
JavaScript

HTML

<div id="menu-trigger" class="pull-right hamburger-menu">
<span></span>
<span></span>
<span></span>
</div>

CSS/LESS

#menu-trigger{
height: 36px;
width: 36px;
margin: 10px;
span{
transition: 0.1s linear;
width: 100%;
height: 3px;
margin-top: 6px;
background-color: white;
display: block;
}
&.active{
span{
transition: 0.1s linear;
&:nth-child(1){
transform: rotate(45deg);
position: relative;
top: 10px;
}
&:nth-child(2){
display: none;
}
&:nth-child(3){
transform: rotate(-45deg);
top: 1px;
position: relative;
}
}
}
}

JavaScript

var $hamburgerMenu = $(".hamburger-menu");
$hamburgerMenu.on("click", function(e) {
$hamburgerMenu.toggleClass("active");
$(".mobile-navigation").toggleClass("active");
});

You may also like...