// HTML <div class="menu-wrap"> <input type="checkbox" class="toggler" /> <div class="hamburger"><div></div></div> <div class="menu"> <div> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> </div> // CSS .menu-wrap .menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; visibility: hidden; } .menu-wrap .menu > div { background-color: steelblue; flex: none; width: 200vw; height: 200vw; display: flex; justify-content: center; align-items: center; border-radius: 50%; transform: scale(0); transition: all 1s ease; } .menu-wrap .menu > div > div { max-width: 90vw; max-height: 100vh; opacity: 0; transition: opacity 0.4s ease 0.4s; text-align: center; } .menu-wrap .menu li { list-style: none; padding: 1rem 0; font-size: 1.5rem; } .menu-wrap .menu li a { text-decoration: none; color: white; transition: color 0.4s ease; } .menu-wrap .toggler:checked ~ .menu { visibility: visible; } .menu-wrap .toggler:checked ~ .menu > div { transform: scale(1); } .menu-wrap .toggler:checked ~ .menu > div > div { opacity: 1; }
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