A CodePen by dominicmagnifico. Super Neat Responsive Nav - Uses a bit of jQuery to build a cool nav with some transitions.

index.html

<h2 class="slide-trigger">Super Neat Menu! <span></span></h2>

<nav role='navigation' class="nav">

  <ul class="menu">
    <li><a href="#">Inky</a></li>
    <li><a href="#">Bink</a></li>
    <li><a href="#">A Bottle</a></li>
    <li><a href="#">Of Ink</a></li>
    <li><a href="#">The Cork</a></li>
    <li><a href="#">Fell Off</a></li>
    <li><a href="#">You Stink</a></li>
  </ul>
  
</nav>  

script.js

/*------------------------------------*\
    //Mobile Collapsable Menu
\*------------------------------------*/
(function ($) {
    $.fn.collapsable = function (options) {
        return this.each(function () {
            var obj = $(this);
            var tree = $('.menu');
            obj.click(function () {
                if (obj.is(':visible')) {
                    tree.toggleClass('onzor');
                }
                obj.toggleClass('active');
            });
            $(window).resize(function () {
                if ($(window).width() >= 1066) {
                    obj.removeClass('active');
                    tree.removeClass('onzor');
                };
            });
        });
    };
})(jQuery);
//Call it
$(document).ready(function () {
    $('.slide-trigger').collapsable();
});

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Montserrat);

body {
  background:#30302f;
  font-family: Montserrat;
  margin:0;
}

.nav { 
  width: 100%;
  margin: -20px auto 0 auto;
  max-width: 1140px;
  padding:20px 0;
}

ul {
  list-style:none;
  margin:0;
  padding:0;
  li {
    float:left;
    a{
      background:#000;
      color:#fefefe;
      margin:0 10px 0 0;
      padding:5px 10px;
      text-decoration:none;
    }
  }
}

.slide-trigger {
  display: none; /* need this */
  border: 1px solid #CCCCCC;
  cursor: pointer;
  padding:5px 10px;
  span {
    display: block;
  }
}

@media only screen and (max-width: 1066px){
  .slide-trigger {
      @include transition(.4s);
      background:#1a1a1a;
      border:none;
      border-bottom:1px solid #3e3e3e;
      box-shadow:2px 2px 10px rgba(0,0,0,.3) inset;
      color:#fefefe;
      display: block;
      font: {
          size:emCalc(18px);
      }
      outline-color:#2b2b2b;
      padding:10px 15px;
      text-align:center;
      width:100%;
      &:before {
          @include transition(.4s);
          background:#646461;
          border-radius:25px;
          content:"\003E";
          display:inline-block;
          margin:0px 20px 0 0;
          padding:6px 13px;
      }
      &:hover,
      &.active {
          background:#000;
      }
      &.active {
          &:before {
              @include rotate(90deg);
              display:inline-block;
          }
      }
  }
  .menu {
      @include transition(.4s);
      height:0;
      overflow:hidden;
      margin-top:-21px;
      &.onzor {
          height:280px;
      }
      li {
          float:none;
          margin:0;
          padding:0;
          a {
              @include transition(.4s);
              background:#1a1a1a;
              border:none;
              border-bottom:1px solid #3e3e3e;
              box-shadow:2px 2px 10px rgba(0,0,0,.3) inset;
              color:#fefefe;
              display: block;
              font: {
                  size:emCalc(18px);
              }
              outline-color:#2b2b2b;
              padding:10px 15px;
              text-align:center;
              width:100%;
              &:hover {
                  background:#000;
              }
          }
      }
  }
}