Menu Toggle with Pure CSS
A short tutorial on how to design a menu navigation toggle with only CSS
Before we begin
I would like to point out that the concept of “toggling” the main menu (even for mobile) is not always the best solution. If you’re interested, you can take a look at a previous article I wrote explaining why: Using Hamburger Menus? Try Sausage Links
Now that we have mentioned possible pitfalls of relying so heavily on toggle menus, let’s build one!
Our Final Product
To implement this design you really don’t need much in terms of HTML:
- A single
labelthat corresponds to the
navelement to house our unordered list items
The first thing we need to do is “hide” the
checkbox input element. It’s important to avoid using
display: none or
visibility: hidden in order to achieve this. Those CSS properties can negatively impact accessibility (specifically screen readers). So we will be relying on the
opacity properties to help us out.
Then we give our corresponding
label a minor face-lift to make it appear more button-like:
For our main
nav element, we want to set it’s position to
absolute in order to avoid any janky page rendering issues that might occur when toggling the menu:
The last step is to actually show the menu if the user toggles the
It might not look like much, but you now have a fully functional menu toggle - made with pure CSS!
With Great Power…
Although this design is very simple to implement, please remember to use these types of menus wisely. Just because you can do something, doesn’t always mean you should.