Horizontal Slide Navigation Menu with Pure CSS/CSS3

Preview:

Description:

A pure CSS/CSS3 based navigation system that slides out a horizontal menu as you click on the toggle icon. Created by rickzanutta.

How to use it:

Include the normalize.css and the Font Awesome in the head section of the web page (Not required but recommended).

<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Create a checkbox for the checked state.

<input type="checkbox" id="nav-button" name="nav-button">

Create a navigation menu with Html list.

<nav class="nav-menu">
  <label for="nav-button" class="nav-trigger"><i class="fa fa-bars"></i></label>
  <ul>
    <li><a href="https://twitter.com" target="_blank"><i class="fa fa-twitter"></i><span>Twitter</span></a></li>
    <li><a href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin"></i><span>Linkedin</span></a></li>
    <li><a href="https://github.com" target="_blank"><i class="fa fa-github"></i><span>Github</span></a></li>
    <li><a href="http://codepen.io" target="_blank"><i class="fa fa-codepen"></i><span>Codepen</span></a></li>
  </ul>
</nav>

The basic CSS styles.

a { text-decoration: none; }
ul,
li {
  margin: 0;
  padding: 0;
}

The CSS for the toggle icon.

.nav-trigger {
  background: #1abc9c;
  cursor: pointer;
  font-size: 36px;
  float: left;
  padding: 5px 10px;
}
.nav-trigger:hover { background: #15987e; }
.nav-trigger i {
  color: #fff;
  padding: 5px;
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
}

The CSS for the navigation menu.

.nav-menu {
  background: #333;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
.nav-menu ul {
  display: inline-block;
  left: -100%;
  position: relative;
  -webkit-transition: left 0.2s ease-in-out;
  transition: left 0.2s ease-in-out;
}
.nav-menu li {
  display: block;
  float: left;
}
.nav-menu li a {
  color: #c1c1c1;
  display: block;
  font-size: 24px;
  line-height: 60px;
  height: 50px;
  margin-top: 1px;
  padding: 0 20px;
  text-align: center;
}
.nav-menu li a:hover span {
  opacity: 1;
  visibility: visible;
}
.nav-menu li a i {
  font-size: 36px;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.nav-menu li a i.fa-twitter:hover { color: #00aced; }
.nav-menu li a i.fa-linkedin:hover { color: #0077b5; }
.nav-menu li a i.fa-github:hover,
.nav-menu li a i.fa-codepen:hover { color: #fff; }
.nav-menu li a span {
  position: absolute;
  top: 0%;
  left: 100%;
  width: 100%;
  height: 100%;
  font-size: 24px;
  line-height: 55px;
  opacity: 0;
  padding: 0 20px;
  text-align: left;
  -webkit-transition: opacity 0.2s ease, visibility 0.2s ease;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  visibility: hidden;
}

The CSS for the checked state.

input[type=checkbox]:checked + .nav-menu .nav-trigger i {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
input[type=checkbox]:checked + .nav-menu .nav-logo { opacity: 0; }
input[type=checkbox]:checked + .nav-menu ul { left: 0; }
input[type=checkbox] {
  position: absolute;
  top: -99px;
}