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.

Latest comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git