A Pen by Brock Nunn.

index.html

<nav id="nav" role='navigation'>
  <a class="clickr fontawesome-reorder"></a>
  <ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

<div class="text">
<h1>Welcome To My Website!</h1>
<p>Feel free to use the responsive nav :)</p>
  photo credit: <a href="http://www.flickr.com/photos/wili/3156977955/">wili_hybrid</a> via <a href="http://photopin.com">photopin</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/">cc</a>
</div>

script.js

$('.clickr').click(function(){
  $('#nav ul').slideToggle(300);
});

Simple-Responsive-Navigation.markdown

Simple Responsive Navigation

A quick responsive navigation template built with less, flexbox and a little jQuery. Using less, users can easily customize the navigation to their needs.

A Pen by Brock Nunn on CodePen.

License.

style.less

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

@breakpoint:40em;

@navbg:fadeout(#313131, 15%);
@itemhover:fadeout(#222, 45%);
@linkcolor:#ccc;

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

body {
font-family: lato;
  background: url(http://farm4.staticflickr.com/3088/3156977955_031c06623f_b.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#nav {
  width: 85%;
  background: @navbg;
  margin: 0 auto;
  margin-top: 2em;
  border-radius: .25em;
  overflow: auto;
   
  @media(max-width:@breakpoint){ 
    width: 95%;
  }
  
  .clickr {
    color: @linkcolor;
    display: block;
    text-align: right;
    padding: .5em;
    font-size: 1.25em;
    display: none;
     
     @media(max-width:@breakpoint){
      display: block;
    }
    
  }
  
  ul {
    display: flex;
    align-items: stretch;
    margin:0;
    padding: 0;
    
     @media(max-width:@breakpoint){
      flex-direction: column; display: none;
    }
    
    li {
      list-style: none;
      align-items: stretch;
      flex:1;
      text-align: center;
      
      &:first-child a {
        border-left: none;
      }
      &:last-child a {
        border-right: none;
      }
      &.active a {
        background:@itemhover ;
        border-bottom: 1px solid teal;
      }
      
      a {
        color: @linkcolor;
        text-transform: uppercase;
        text-decoration: none;
        text-shadow: 0px 1px 1px #000;
        font-weight: 200;
        padding: 1em 0;
        display: block;
        border-right:1px solid fadeout(black, 70%); 
        border-left:1px solid fadeout(white, 90%);
        
        @media(max-width:@breakpoint){border-top:1px solid fadeout(black, 70%); border-bottom:1px solid fadeout(white, 90%);}
        
        &:hover {
          background:@itemhover;
          border-bottom: 1px solid tomato;
        }
      }
    }
  }
}

.text {
    color: #fff;
  font-weight: 200;
  text-align: center;
  h1 {
    font-weight: 200;
    text-transform: uppercase;
    text-shadow: 0px 10px 0px fadeout(#000, 85%);
  }
  
  a {
    color: #fff;
    text-decoration: none;
    
    &:hover {
      text-decoration: underline;
    }
  }
}