Responsive slide-out nav. Ripped out of my most recent project.

nav.html

<div class="mast__wrapper">
  <ul id="nav-to-reveal" class="nav--site">
    <li class="nav-item"><a href="#">learn</a></li>
    <li class="nav-item"><a href="#">about</a></li>
    <li class="nav-item"><a href="#">contact</a></li>
    <li class="nav-item"><a href="#">faq</a></li>
  </ul>
  <a class="nav-reveal" id="nav-reveal-button" href="#">
    <span class="icon-list"></span><span class="nav-reveal__label">MENU</span>
  </a>
</div>

responsiveMenu.js

//requires jquery
$(function() {
  //mobile nav
  $("#nav-reveal-button").on("click", function(e) {
    $("#nav-to-reveal").toggleClass("revealed");
  });
});

responsiveMenu.scss

$medium-screen: 48em; //kinda like ipad width
$nav__bp: "only screen and (min-width: #{$medium-screen})";

//this is the class for the show menu button
.nav-reveal {
    //hide when 
    @media #{$nav__bp} {
        display: none;
    }
}

.nav--site {
    top:$red__nav__height;
    margin-bottom:$red__nav__height;
    background: $color__red-nav;
    z-index: 6;
    overflow: hidden;
    max-height: 0;
    position:relative;
    @include transition(max-height 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86));
    &.revealed {
        max-height: 500px; //nonsense number
    }
    .nav-item {
        text-align: center;
        a {
            display: block;
            width: 75%;
            margin: 0 auto;
            padding: 1rem 0;
            height: auto;
            text-transform: lowercase;
            font-weight:bold;
        }
    }
    @media #{$nav__bp} {
        max-height: inherit;
        display: block;
        top:0;
        margin-bottom: 0;
        .nav-item {
            
            float:right;
            margin-right:3em;
            &:first-child {
                margin-right: $column-gutter/2;
            }
            display: inline-block;
            padding:0;
            height: 100%;
            a {
                line-height: $red__nav__height--px;
                font-weight:300;
                width: 100%;
                height: 100%;
                padding:0;
            }
        }
        background:transparent;
        left:30%;
        width: 69%;
        height: $red__nav__height--px;
    }
}