CSS / JavaScript / LESS / SCSS Hamburger Menu (Mobile Menu) Januar 2, 2019 Create a simple & useful mobile menu Table of contentsHTMLCSS/LESSJavaScript HTML HTML <div id="menu-trigger" class="pull-right hamburger-menu"> <span></span> <span></span> <span></span> </div> CSS/LESS Sass #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 JS var $hamburgerMenu = $(".hamburger-menu"); $hamburgerMenu.on("click", function(e) { $hamburgerMenu.toggleClass("active"); $(".mobile-navigation").toggleClass("active"); });