Freddy Montes

Costa Rica (GMT-6)

Frontend Developer with a graphic design degree. UX/UI and Javascript crafter. More

CSS rotated fan menu

November 20, 2020

This post was originally posted on my Instagram account.

CSS rotated fan menu

The idea is simple, you have a checkbox that when is checked it rotates the menu from the bottom up.

You can use the general sibling combinator selector from #CSS A ~ B hat will mach any B that’s follow A.

With this selector we can rotate <nav> when the input is checked from -180 deg to 0 deg and animate that rotation with transition.

SWIPE FOR MORE DETAILS INCLUDING A VIDEO.

FULL CODE IN: bit.ly/fanmenu

Credits for the design @yueyueguy. Amazing designer.

Let me know if you like this tutorial or if you have any question. And if you like this content, please share to reach more people.

© 2020, Built with pure 🔥 and Gatsby