CodePen

HTML

            
              <button class="button">&#9776;</button>
<nav class="menu" role='navigation'>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul> 
</nav>
<div class="content">
  <p>This is just a quick idea, I know it's not optimal.</p>
</div>
            
          
!

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,800);

*{
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

p{
  margin: 20% auto;
  font-weight: 300;
  font-size: 2em;
  opacity: .4;
  width: 50%;
}

.button{
  padding: 10px 20px;
  position: fixed;
  top: 20px;
  right: 20px;
  color: #111;
  background: transparent;
  border: none;
  outline: none;
  font-weight: 800;
  font-size: 3em;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Sans-serif;
  letter-spacing: 2px;
  z-index: 99;
}
.button:hover{cursor: pointer}

.menu{
  width: 300px;
  padding: 50px;
  position: fixed;
  top: 0;
  bottom: 0;
  right: -300px;
  background: #111;
  z-index: 100;
  transition: all .3s cubic-bezier(0,0,.5,1.5);
}
  .button:focus ~ .menu{right: 0}
  /* Works fine with .button:active and .button:hover too, but it won't be toggleable and it will be a bit buggy.*
  
  * Thanks to /u/secusc on /r/web_design for the .button:focus idea, I had originally made it with :active */

    .menu ul li{list-style: none;}
    .menu ul li a{
      color: #f2f2f2;
      text-decoration: none;
      text-transform: uppercase;
      text-align: right;
      display: block;
      width: 100%;
      letter-spacing: 2px;
      padding: 5px 0;
    }
    .menu ul li a:hover{font-weight: 800;}

/*Updated on April 12th to push content when menu opens*/
   .content{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     -webkit-transition: all .1s ease-in-out;
     -moz-transition: all .1s ease-in-out;
     transition: all .1s ease-in-out;
   }
  button:focus ~ .content{left: -300px;}
/* Again it would also work with :active and :hover */
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Nothing to see here, because CSS is awesome :) 

// MadsHaakansson.dk
// Twitter @ MadsBHaakansson
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................