← All elements
<input type="checkbox" id="oc"><label for="oc" class="burger"><i></i><i></i><i></i></label><div class="shade"></div><nav class="drawer"><a href="#">Home</a><a href="#">Elements</a><a href="#">Guides</a><a href="#">Contact</a></nav>About this menu
A side navigation panel that slides in from the left, toggled with a checkbox and a translate transition.
How it works
A checkbox controls the menu. The drawer sits off screen with translate: -100% and slides in with a transition when the checkbox is checked. The same state turns the three burger bars into a cross: the top and bottom bars rotate and move, and the middle bar fades out. A shade layer dims the page behind.
Ways to customise it
- Change the drawer width to make it wider or narrower.
- Switch the translate direction to open from the right.
- Edit the link colours and the hover accent.
Good to know
Hidden content should not be reachable when closed, so for production add script to move focus and set aria-expanded. As a pure CSS pattern it is best for simple sites. Reduce motion for users who ask for it.
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.