CodePen

HTML

            
              <nav class="noselect">
  <li id="nav_icon">Lorem</li>
  <li id="menu_list">☰</li>
  <ul id="menu">
    <a href="#"><li>Home</li></a>
    <a href="/app"><li>Item1</li></a>
    <a href="/doc"><li>Item2</li></a>
    <a href="/blog"><li>Item3</li></a>
    <a href="/login"><li id="login">Login</li></a>
  </ul>
</nav>
<div id="wrapper">
  <p>
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
  </p>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  background-color: #111;
  color: white;
}
.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

*{margin:0; padding:0;}
#wrapper {
  width: 200px;
  position: absolute;
  left:50%;
  margin-left: -100px;
}
nav {
 background: -webkit-linear-gradient(top, #333, #222);
 background: -moz-linear-gradient(top, #333, #222);
 background: -o-linear-gradient(top, #333, #222);
 background: -ms-linear-gradient(top, #333, #222);
 background: linear-gradient(top, #333, #222);
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 50px;

 z-index: 1000;
 
 -webkit-box-shadow: 0px 1px 7px #000;
 box-shadow: 0px 1px 7px #000;
}
nav ul {
  float: right;
}

nav li, #menu_list {
 display: block;
 float: left;
 font-family: Helvetica; 
 font-size: 18px;
 padding: 15px;
 
 -webkit-transition: 0.3s;
 -moz-transition: 0.3s;
 -o-transition: 0.3s;
 -ms-transition: 0.3s;
 transition: 0.3s;
 border-left: solid #202020 1px;
 border-right: solid #333 1px;
 height: 20px;
 line-height: 20px;
}

nav li:hover, #menu_list:hover {
 color: #e5e5e5;
 height:20px;
 
 background: -webkit-linear-gradient(top, #292929 0%, #191919 100%);
 background: -moz-linear-gradient(top, #292929 0%, #191919 100%);
 background: -o-linear-gradient(top, #292929 0%, #191919 100%);
 background: -ms-linear-gradient(top, #292929 0%, #191919 100%);
 background: linear-gradient(top, #292929 0%, #191919 100%);
 
 -webkit-transition: 0.3s;
 -moz-transition: 0.3s;
 -o-transition: 0.3s;
 -ms-transition: 0.3s;
 transition: 0.3s;
}

nav li:active, #menu_list:active {
  background: -webkit-linear-gradient(top, #191919 0%, #090909 100%);
  background: -moz-linear-gradient(top, #292929 0%, #191919 100%);
  background: -o-linear-gradient(top, #292929 0%, #191919 100%);
  background: -ms-linear-gradient(top, #292929 0%, #191919 100%);
  background: linear-gradient(top, #292929 0%, #191919 100%);
}

nav li:first-child {
  box-shadow: 0 -1px 0 1px #333;
}

nav li:last-child {
  box-shadow: 1px -1px 0 1px #202020;
}

nav a {
   color: #9b9b9b;
   text-decoration: none;
}

#menu {

min-width: 450px;
  @media (min-width: 660px) {
    display: block !important; 
  }
}
@media all and (min-width: 660px) {
    #menu_list {
      display: none;
   }
}
  @media all and (max-width: 659px) {
  #menu_list {
    display: block !important;
    float: right;
    color: #9b9b9b;
  }
  nav {
    position: absolute;
    }
  #menu{
    margin-top: 15px;
    width: 100%;
    overflow: hidden;
    display: none;
    background-color: #555;
  }
    #menu li{
    float:none;
    text-align: center;
    box-shadow: 0px 0px 0px black;
    transition-duration: .3s;
    height: 15px;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 10px;
    line-height: 14px;
    border: 0;
  }
  nav li:first-child {
    box-shadow: inset 0px 0px 0px black;
  }
  #menu li:hover {
    background: #111;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10%;
    margin-right: 10%;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function() {
   $('#menu_list').toggle(function() {
     $('#wrapper').stop().animate({'marginTop':'280px'},'fast'),
     $('#menu').stop().fadeIn('fast');
   } ,function() {
     $('#wrapper').stop().animate({'marginTop':'0px'},'fast'),
     $('#menu').hide();
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................