CodePen

HTML

            
              <header>
  <a href="#" class="menu">
    <span></span>
  </a>
  <ul class="nav">
    <li>
      <a href="#">First Menu Item</a>
    </li>
    <li>
      <a href="#">Second Menu Item</a>
    </li>
    <li>
      <a href="#">Third Menu Item</a>
    </li>
    <li>
      <a href="#">Fourth Menu Item</a>
    </li>
  </ul>
</header>
            
          
!
via HTML Inspector

CSS

            
              body{
  background:url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/bedge_grunge.png');
}

header {
  position: fixed;
  height: 5em;
  width: 100%;
  background:
   -moz-linear-gradient(
     top,
     rgba(0,0,0,0.8) 0%,
     rgba(0,0,0,0.9) 50%,
     rgba(0,0,0,0.9) 51%,
     rgba(0,0,0,0.95) 100%
   ) 
  ;
  background:
   linear-gradient(
     top,
     rgba(0,0,0,0.8) 0%,
     rgba(0,0,0,0.9) 50%,
     rgba(0,0,0,0.9) 51%,
     rgba(0,0,0,0.95) 100%
   ) 
  ;
  box-shadow: 0 2px 2px rgba(0,0,0,0.7);
}

a.menu {
  display:block;
  width: 5em;
  height: 3em;
  margin: 1em auto;
  background:
   -moz-linear-gradient(
     top,
     rgba(255,255,255,0.2) 0%,
     rgba(255,255,255,0.1) 50%,
     rgba(255,255,255,0.1) 51%,
     rgba(255,255,255,0.05) 100%
   ) 
  ;
  background:
   linear-gradient(
     top,
     rgba(255,255,255,0.2) 0%,
     rgba(255,255,255,0.1) 50%,
     rgba(255,255,255,0.1) 51%,
     rgba(255,255,255,0.05) 100%
   ) 
  ;
  border-radius: 0.25em;
  box-shadow: 0 1px rgba(0,0,0,0.95), inset 0 1px rgba(255,255,255,0.3);
}

a.menu:hover {
  background:
   -moz-linear-gradient(
     top,
     rgba(255,255,255,0.3) 0%,
     rgba(255,255,255,0.15) 50%,
     rgba(255,255,255,0.15) 51%,
     rgba(255,255,255,0.1) 100%
   ) 
  ;
  background:
   linear-gradient(
     top,
     rgba(255,255,255,0.3) 0%,
     rgba(255,255,255,0.15) 50%,
     rgba(255,255,255,0.15) 51%,
     rgba(255,255,255,0.1) 100%
   ) 
  ;
}

a.menu:active {
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.95), 0 1px rgba(255,255,255,0.3);
}

a.on {
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.95), 0 1px rgba(255,255,255,0.3);
}

a.menu span {
  float:left;
  width: 2em;
  height: 0.25em;
  background: rgba(255,255,255,0.5);
  margin: 1.37em 1.5em;
  border-radius:0.125em;
  box-shadow: 0 -1px rgba(0,0,0,0.95);
}

a.menu span:before {
  content:"";
  float:left;
  width: 2em;
  height: 0.25em;
  background: rgba(255,255,255,0.5);
  margin: -0.6em 0 0 0;
  border-radius:0.125em;
  box-shadow: 0 -1px rgba(0,0,0,0.95);
}

a.menu span:after {
  content:"";
  float:left;
  width: 2em;
  height: 0.25em;
  background: rgba(255,255,255,0.5);
  margin: 0.6em 0 0 0;
  border-radius:0.125em;
  box-shadow: 0 -1px rgba(0,0,0,0.95);
}

a.menu:active span {
  margin: 1.45em 1.5em;
}

ul.nav {
  position:fixed;
  width: 100%;
  background:rgba(0,0,0,0.7);
  display:none;
}

ul.nav li {
  width:100%;
  height:2em;
  line-height: 2em;
  font-size: 150%;
  text-align:center;
  font-family: Arial, sans-serif;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}

ul.nav li a {
  text-decoration:none;
  color:rgba(255,255,255,0.7);
}

ul.nav li a:hover {
  text-decoration:underline;
  color:rgba(255,255,255,0.9);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              jQuery(document).ready(function($){
  var toggle = 0;
  $('.menu').click(function(e){
    e.preventDefault();
    
    if(toggle == 0) {
      $('.nav').show();
      toggle++;
    } else {
      $('.nav').hide();
      toggle = 0;
    }
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................