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.

Top comments (0)

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.