Neat trick to toggle the display of something in the page, using only CSS. In this case, a slide out menu.
First we need the HTML:
<input id="menu-toggle" type="checkbox"> <label class="menu-trigger" for="menu-toggle"></label> <nav id="menu"> <ul> <li> <a href="">Menu Item</a> </li> </ul> </nav>
Use the “:checked” pseudo-class, to check the state of the menu (open/close).
Hide the checkbox input, as it is not vissually needed, and style the label as a menu button.
#menu { width: 100%; position: fixed; right: -100%; /* move the menu out of the screen */ top: 0; bottom: 0; overflow-y: auto; transition: all 1s cubic-bezier(0.2, 1, 0.2, 1) 0s; z-index: 999; } #menu-toggle { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; } #menu-toggle:checked ~ #menu { right: 0; /* add the menu into the screen */ } .menu-trigger { /* Closed menu style ☰ */ } #menu-toggle:checked ~ .menu-trigger { /* Opened menu style × */ }