Subscirbe to Kodhus news letter and get new tips and tutorials right in your inbox by entering your email below

Animated menu reveal, Only css3

Kodhus >
Like & share to be notified of the new tips & tutorials:

In this tutorial, we are going to use ONLY css3 techniques to reveal a neat menu. We achieve the effect using following css3 techniques:

  • transform
  • transition
  • Pseudo elements
  • Sibiling selector (+)

We also make sure we make a neat effect on the mobile device as well using media queries.


Following is the markup of our menu.

The most important thing is the input and its label. Notice the for attribute of the label which points to the input. We use this to trigger the opening and closing of the menu.


Let’s start with styling the menu items themselves.

Pretty self explanatory. We use display: inline-block to make the menu items align horizontally.

Now the trigger and how we set the menu to show and hide.Let’s take this one step by step starting with the navigation button.

We basically use pseudo element :after to create the second shorter line.
Now when the input gets checked, Meaning that we clicked on the trigger, we want the top line to rotate 135deg and the bottom line to first get the same length as the top one and then rotate it 90deg to match the close icon. Take a look at the demo to see why I mean.

Finally we need to actually reveal the menu.

Again we check if the input is checked, we reveal the menu and also make sure that we transform each li 15px to the right to give it a kick ass transformation.

I hope you liked this tutorial. Let me know if you have any questions or feedback in the comment section.