jan 7 2020, 11:30pm
<div> <input id="ham-menu-toggle" type="checkbox"> <label for="ham-menu-toggle"> <span></span> <span></span> <span></span> </label> <ul> <li><a href="#">menu item #1</a></li> <li><a href="#">menu item #2</a></li> <li><a href="#">menu item #3</a></li> <li><a href="#">menu item #4</a></li> <li><a href="#">menu item #5</a></li> <li><a href="#">menu item #6</a></li> <li><a href="#">menu item #7</a></li> </ul> </div><!-- end of ham-menu div -->
input#ham-menu-toggle{ display: none;/*hide traditional input element and show below label instead.*/ } label[for="ham-menu-toggle"]{ display: inline-block; cursor: pointer;/*so user will know this is clickable*/ } label[for="ham-menu-toggle"] span{ display: block; margin-top: 0.2em; width: 2em; border-top: 0.2em solid black; } label[for="ham-menu-toggle"] span:first-child{ margin-top: 0; } input#ham-menu-toggle~ul{ display: none; list-style: none; margin: 0; padding-left: 0; overflow: hidden; line-height: 2em; border-bottom: 0.2em solid black; } input#ham-menu-toggle:checked~ul{ display: block;/*make sure this would cover all menu items when menu is opened(expanded).*/ } input#ham-menu-toggle~ul a{ text-decoration: none; font-weight: bold; color: inherit; }
next: menu with css transition
Comments