How to make menu button using only CSS without JavaScript

Problem

We can use JS(JavaScript) to create menu buttons. But why the way of using only CSS is better than JS. Because some web browsers disable Javascript. These web browsers will not work any more.

Here is how to make menu button using only CSS.

Step 1. Use CSS Selector Pseudo-classes :check

If you do not know about Pseudo-classes, please read below articles at first.

• What is css selector ‘+’ and ‘-’
• What is Pseudo-classes
• What is : check selector

When I click a menu or a checkbox, the background-color of nana will be changed to pink like below picture:

Let’s give a transform property to menu like below:

HTML order is label< input < div. Because CSS is liner process like water fall. It is only work from up to down. If I click <label> or <input>(check box), I can give :checked property to <div>. If <label>is below than <div>, it does not work.

Don’t forget it, Markup order is really important!!!!!

Step 2. HTML mark up

To be continue…