DEV Community

Takane Ichinose
Takane Ichinose

Posted on


CSS Only Navigation Menu

This is a navigation menu without using any Javascript code.

I used animation loop on the the 'Rounded' growing overlay of the navigation menu.

I used the 'hidden checkbox' approach to show or hide the menu box.

The 'hamburger menu', and the 'X' link is a label, pointing to the ID of the checkbox. So that, I could trigger the checkbox toggle while clicking on the other element.

I designed the animations of the 'hamburger menu' and the growing overlay.

This navigation menu is optimised for PC browser.

Oldest comments (0)

Join us at DEV You’ve already scrolled down this far, why not join our community of 900k+ developers all learning together?