CSS
【CSS】CSSのみのハンバーガーメニューMorphing Hamburger Menu
January 23, 2017

Morphing Hamburger MenuはCSSのみのハンバーガーメニュー。
<input id="toggle" type="checkbox"> <!-- IMPORTANT: Any element that we want to modify when the checkbox state changes go here, being "sibling" of the checkbox element --> <!-- This label is tied to the checkbox, and it will contain the toggle "buttons" --> <label class="toggle-container" for="toggle"> <!-- If menu is open, it will be the "X" icon, otherwise just a clickable area behind the hamburger menu icon --> <span class="button button-toggle"></span> </label> <!-- The nav menu --> <nav class="nav"> <a class="nav-item" href="">Dashboard</a> <a class="nav-item" href="">History</a> <a class="nav-item" href="">Statistics</a> <a class="nav-item" href="">Settings</a> </nav>
MIT