In this video, I’ll teach you to build fancy collapsible navigation without using any Javascript. Just HTML and CSS!

I love that we can make clever use of CSS and HTML to achieve something most people use Javascript for, but you won’t get far as a web developer without Javascript. That’s why I made a cheat sheet with practical examples to help you learn it. Head over to this post's page on my site to get your copy.

If you want to work along with the video, start from this pen. Open that and click the “Fork” button in the bottom-right so you can get your own copy to work with.

The CSS framework I used is Milligram. I like to use it because it takes just basic HTML and makes it look nice. I don’t have to sprinkle a bunch of wacky classes around to get something that looks decent.

I talk about the “+” selector and refer to it in the video as the “sibling selector.” More accurately, it’s the adjacent sibling selector. It only selects the UL if it is a sibling of the checked checkbox and also if the two are adjacent (meaning no elements between).

Hope you enjoy this tutorial! Comment here or tweet at me if you have questions.