Dropdown Navigation in Pure CSS
Did you know you could toggle a dropdown navigation on click using only CSS?
Yes, you don't need any JavaScript for this one. Let's start with a basic markup.
When the ul
element drops down, it appears a layer above the content on the page. So it needs to be absolutely positioned.
Below is the CSS to begin with (eliminating colors, padding etc.)
However, we want the ul
to be hidden to begin with. And on click of the menu-icon
we want the ul
to dropdown.
But if we use display: none
, we cannot "animate" the dropdown from zero height to full height the way you see in the demo above. So, instead, let's use max-height: 0
and overflow: hidden
to hide the navigation.
We also need the transition rule for animation.
Now comes the main part.
The "checkbox hack"
We need to toggle the menu display using only CSS – no JavaScript. Best way to do that is by using a hidden checkbox element. We use the hamburger icon as the label for this checkbox element. Once the label is clicked, the checkbox gets checked, and hence we can use the :checked
pseudo-class selector to display the menu!
Didn't get it? Let's take it step by step.
1. Add a hidden checkbox element before the ul.
2. Wrap the menu-icon
with a label "for" checkbox.
Now the icon is a label for the checkbox. So when you click on the menu icon, the checkbox toggles. Initially the checkbox is not checked. Once it's clicked, the invisible checkbox gets "checked".
So, when the checkbox is checked, let's display the navigation.
We're using trThe ~
symbol is the general sibling selector – which separates two selectors (#checkbox:checked
and nav ul
) and matches the second element only if it follows the first element. Understand the general sibling selector better with some examples here. This means, when the checkbox is checked, the menu slides down because max-height
goes from 0 to a large number.
The ~
symbol is the general sibling selector – which separates two selectors (#checkbox:checked
and nav ul
) and matches the second element only if it follows the first element. Understand the general sibling selector better with some examples here. This means, when the checkbox is checked, the menu slides down because max-height
goes from 0 to a large number.
The ~
symbol is the general sibling selector – which separates two selectors (#checkbox:checked
and ul
) and matches the second element only if it follows the first element. Understand the general sibling selector better with some examples here.
This means, when the checkbox is checked, the menu slides down because max-height
goes from 0px
to a 300px
.
This is it! If you got everything right, clicking on the hamburger icon now makes your menu slide up and down. Neat.
View the working demo on Codepen
Hope you liked this issue :)
📘 Complete Guide to CSS Flex and Grid
If you loved this write-up and how it was explained, you’ll absolutely love my eBook CSS Flex and Grid. Check it out!
📨 Newsletter suggestion
I love Tailwind CSS. If you love it too, I highly recommend subscribing to this one 👇
Tailwind Weekly: Weekly newsletter about all things Tailwind CSS. New issue every Saturday.