// HTML <div class="menu-wrap"> <input type="checkbox" class="toggler" /> <div class="hamburger"><div></div></div> </div> //CSS * { margin: 0; padding: 0; box-sizing: border-box; } .menu-wrap { position: fixed; top: 0; left: 0; z-index: 1; } .menu-wrap .toggler { position: absolute; top: 0; left: 0; height: 60px; width: 60px; cursor: pointer; z-index: 2; opacity: 0; } .menu-wrap .hamburger { position: absolute; top: 0; left: 0; height: 60px; width: 60px; padding: 1rem; background-color: teal; z-index: 1; display: flex; align-items: center; justify-content: center; } .menu-wrap .hamburger > div { width: 100%; height: 2px; background-color: white; display: flex; justify-content: center; align-items: center; flex-direction: column; transition: all 0.4s ease; z-index: 2; position: relative; } .menu-wrap .hamburger > div::before, .menu-wrap .hamburger > div::after { content: ''; position: absolute; height: 2px; z-index: 2; width: 100%; background: inherit; transform: translateY(10px); } .menu-wrap .hamburger > div::before { transform: translateY(-10px); } .menu-wrap .toggler:checked + .hamburger > div { transform: rotate(135deg); } .menu-wrap .toggler:checked + .hamburger > div::before, .menu-wrap .toggler:checked + .hamburger > div::after { transform: rotate(90deg); } .menu-wrap .toggler:checked:hover + .hamburger > div { transform: rotate(225deg); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter