Sibling Selectors - Toggle

by Karla Jaramillo

HTML

<input type="checkbox" id="toggle">
<label for="toggle">&#9776;</label>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400);

input {
  display: none;
}
label,
ul {
  border: 1px solid #bdc3c7;
  border-radius: 6px;
}
label {
  color: #bdc3c7;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  padding: 5px 9px;
  transition: all .15s ease;
}
label:hover {
  color: #1bbc9c;
}
/*  h2 + p 
Adjacent Sibling Selector */

input:checked + label {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  color: #9799a7;
}
nav {
  max-height: 0;
  overflow: hidden;
  transition: all .15s ease;
}

/*  h2 ~ p 
General Sibling Selector*/

input:checked ~ nav {
  max-height: 500px;
}
ul {
  list-style: none;
  font-family: 'Lato';
  font-weight: 300;
  margin: 8px 0 0 0;
  padding: 0;
  width: 6em;
  text-align: center;
}
li {
  border-bottom: 1px solid #cecfd5;
}
li:last-child {
  border-bottom: 0;
}
a {
  color: #ABB7B7;
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
a:hover {
  color: #1bbc9c;
}