Menu Toggle using only CSS

Menu Toggle using only CSS

by GioLogist

HTML

<label for="menu-toggle">Click me 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>
</ul>

CSS

label {
  cursor: pointer;
}
#menu-toggle {
}
#menu {
  display: none;
}
#menu-toggle:checked + #menu {
  display: block;
}

JavaScript

/**
A lot of menus require JavaScript to toggle its visibility. However, it's very simple to accomplish the same task without any JavaScript by using a simple label and checkbox along with the :checked pseudo-class.
**/

/**
Helpful Article:
http://www.outofscope.com/css-only-menu-toggle-no-javascript-required/
**?