A pure CSS click toggle
Making stuff with pure CSS is something that has always dazzled me. I always thought it was somehow more semantic, and besides it’s utopia, part of me thinks that a great website should run any JavaScript whatsoever.
But after I’ve seen the Nolan Lawson talk that every JavaScript code freezes the page for a little time I started to have some concerns about it. (I know opening a dropdown would be even perceivable, but why not make it in CSS, right?)
Making a drop down menu I thought would be more challenging than this. Turns out that it is quite simple.
For this experiment you will need:
- 2 divs
- 1 input[type=checkbox]
- 2 labels
- 1 a
Basics:
We will make the labels trigger the checkbox and the css will identify the checkbox as checked. The elements after the checked checkbox will have their own properties. Also we will make a bigger label on the background to trigger the close.
Ok, but how?
Check it on CodePen.io, I made an effort to comment as much as I could.
Hope it’s useful for you as much as it was for me!