← All elements
<div class="hm"><input type="checkbox" id="hm"><label for="hm" class="ic" aria-label="Menu"><i></i><i></i><i></i></label><ul><li>Profile</li><li>Settings</li><li>Sign out</li></ul></div>About this menu
A three-bar menu icon that morphs into a cross and opens a small menu, switched by a checkbox with no script.
How it works
A hidden checkbox controls the menu. The three bars of the icon are separate elements: when checked, the top bar moves down and rotates 45 degrees, the bottom bar moves up and rotates the other way, and the middle bar fades out, which forms a cross. A list under the icon fades and slides in at the same time.
Ways to customise it
- Change the icon background and the bar colour.
- Edit the menu items.
- Change the translate distance if you change bar spacing.
Good to know
The label has an aria-label because the icon has no text. For production add script to set aria-expanded and close the menu with Escape.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.