HTML <div class="body"> <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu"> <label for="openSidebarMenu" class="sidebarIconToggle"> <div class="spinner diagonal part-1"></div> <div class="spinner horizontal"></div> <div class="spinner diagonal part-2"></div> </label> <div id="sidebarMenu"> <div class="main-content-wrapper"> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> </div> </div> CSS .body{ width: 100%; height: 100% } #sidebarMenu { height: 171px; /*change here related your menu height*/ position: fixed; overflow: none; width: 100%; z-index: 100; transform: translateY(-171px); /*change here related your menu height*/ } .main-content-wrapper a{ width: 100%; height: 40px; display: block; background: #030303; text-align: center; padding-top: 15px; border: 1px solid #4b4545; color: whitesmoke; text-decoration: none; } #sidebarMenu::-webkit-scrollbar { width: 12px; } #sidebarMenu::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } #sidebarMenu::-webkit-scrollbar-thumb { box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background: #0000002e; height: 50px; } .sidebarMenuInner{ margin:0; padding:0; border-top: 1px solid rgba(255, 255, 255, 0.10); } input[type="checkbox"]:checked ~ #sidebarMenu { transform: translatey(0); top:50px /*change here related your top menu height*/ } input[type=checkbox] { transition: all 0.3s; box-sizing: border-box; display: none; } .sidebarIconToggle { transition: all 0.3s; box-sizing: border-box; cursor: pointer; position: absolute; z-index: 99; height: 22px; width: 22px; left:10px; top:10px; display: none } .spinner { transition: all 0.3s; box-sizing: border-box; position: absolute; height: 3px; width: 100%; background-color: black; } .horizontal { transition: all 0.3s; box-sizing: border-box; position: relative; float: left; margin-top: 3px; } .diagonal.part-1 { position: relative; transition: all 0.3s; box-sizing: border-box; float: left; } .diagonal.part-2 { transition: all 0.3s; box-sizing: border-box; position: relative; float: left; margin-top: 3px; } input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal { transition: all 0.3s; box-sizing: border-box; opacity: 0; } input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 { transition: all 0.3s; box-sizing: border-box; transform: rotate(135deg); margin-top: 8px; } input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 { transition: all 0.3s; box-sizing: border-box; transform: rotate(-135deg); margin-top: -9px; } @media screen and (max-width: 950px) { .sidebarIconToggle{ display:block } }
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