Here is the basis for creating a menu with a hamburger button that changes to close when the menu is open. In addition, there is a background on top of the content. You can close the menu by clicking on the background.
codepen example: https://codepen.io/ktr92/pen/gOBRyKO
HTML:
<div class="jsbackdrop"></div> <div class="container"> <header class="header"> <div class="flex items-center space-between w-full"> <div class="headercontent">HEADER</div> <a href="#" class="menubtn" data-menutoggle="mainmenu"> <span></span> <span></span> <span></span> </a> </div> <div class="mainmenu" data-menu="mainmenu"> <div class="mainmenu__wrapper"> <div class="mainmenu__items"> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> <li><a href="#">Page 4</a></li> <li><a href="#">Page 5</a></li> </ul> </div> </div> </div> </header> <main> content body </main> </div> CSS:
[data-menutoggle] { display: block; margin-left: 15px; } [data-menutoggle] span { width: 32px; height: 3px; margin-bottom: 5px; display: block; background: #324064; transform-origin: 4px 0px; transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; &:last-child { margin-bottom: 0; } } [data-menutoggle] span:first-child { transform-origin: 0% 0%; } [data-menutoggle] span:last-child { transform-origin: 0% 100%; } [data-menutoggle].active span:first-child { opacity: 1; transform: translate(0, 18px) rotate(-45deg); } [data-menutoggle].active span:last-child { transform: translate(0, -21px) rotate(45deg); } [data-menutoggle].active span:nth-child(2) { opacity: 0; } [data-menu] { display: none; } [data-menu].active { display: block; } .jsbackdrop { background: rgba(52, 60, 75, 0.5); display: none; position: fixed; z-index: 9; height: 100%; min-height: 100vh; left: 0; top: 0; width: 100%; } .jsbackdrop.active { display: block; } .mainmenu { width: 100%; position: absolute; background: #fff; z-index: 99; left: 0; padding: 10px; top: 100%; } .mainmenu li { list-style: none; margin-bottom: 5px; } JS[jquery]:
$("[data-menutoggle]").on("click", function (e) { e.preventDefault(); let menu = $(this).data("menutoggle"); $(`[data-menu=${menu}]`).toggleClass("active"); $(this).toggleClass("active"); $(".jsbackdrop").toggleClass("active"); }); $(".jsbackdrop").on("click", function (e) { $(this).removeClass("active"); $("[data-menu]").removeClass("active"); $("[data-menutoggle]").removeClass("active"); }); 
Top comments (0)