Most of the toggle menu or simple menu created with Javascript and jQuery. Actually, you can't create a nice, animated, enrich the user interface menu without Javascript / jQuery.
But today I'm going to show you a toggle menu with only CSS. It's not CSS3 also. We should avoid Javascript for website performing, but you can't make a standard, professional website without Javascript at all.
You can use the trick in a simple project. Or if a client wants that he doesn't like to use Javacript. Then this trick will be very helpful to you.
View The Menu Demo - http://codepen.io/anon/pen/jfAoa
HTML Structure-
CSS Structure-
The way this works is that the label is associated with the checkbox via the found the id so that when you click on the label, it toggles the checkbox on and off. In the CSS, we have a rule that only applies when the checkbox is checked. If you wanted the menu to be visible by default, you simply have to specify that the checkbox is checked initially.
See full code. If have a problem, please leave a comment below. Post moderator will reply with a proper answer.
The code is supported in all browsers. But I've tested it in Internet Explorer 9. So you can confirm that it will work above Internet Explorer 9. It's also mobile supported. You can change the style of the CSS and menu style as you want.
If you have same tricks or more advanced tricks from it, don't forget to share with us. You can leave the comment or send me a message through the contact page.
For more Tutorials keep visiting our Blog.
Share it in your Facebook, Twitter, Google Plus wall.
Thanks.
But today I'm going to show you a toggle menu with only CSS. It's not CSS3 also. We should avoid Javascript for website performing, but you can't make a standard, professional website without Javascript at all.
You can use the trick in a simple project. Or if a client wants that he doesn't like to use Javacript. Then this trick will be very helpful to you.
View The Menu Demo - http://codepen.io/anon/pen/jfAoa
HTML Structure-
<label for="menu-toggle">Click to toggle menu</label> <input type="checkbox" id="menu-toggle"/> <ul id="menu"> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Five link</a></li> </ul>
CSS Structure-
label { cursor: pointer;}#menu-toggle { display: none; /* hide the checkbox */}#menu { display: none;}#menu-toggle:checked + #menu { display: block;}
The way this works is that the label is associated with the checkbox via the found the id so that when you click on the label, it toggles the checkbox on and off. In the CSS, we have a rule that only applies when the checkbox is checked. If you wanted the menu to be visible by default, you simply have to specify that the checkbox is checked initially.
See full code. If have a problem, please leave a comment below. Post moderator will reply with a proper answer.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS Toggle Menu</title>
<style> label { cursor: pointer; } #menu-toggle { display: none; /* hide the checkbox */ } #menu { display: none; } #menu-toggle:checked + #menu { display: block; } </style></head><body> <label for="menu-toggle">Click to toggle menu</label> <input type="checkbox" id="menu-toggle"/> <ul id="menu"> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Five link</a></li> </ul></body></html>
The code is supported in all browsers. But I've tested it in Internet Explorer 9. So you can confirm that it will work above Internet Explorer 9. It's also mobile supported. You can change the style of the CSS and menu style as you want.
If you have same tricks or more advanced tricks from it, don't forget to share with us. You can leave the comment or send me a message through the contact page.
For more Tutorials keep visiting our Blog.
Share it in your Facebook, Twitter, Google Plus wall.
Thanks.
