// #1 MenuButton
var menuBtn = $('#menu-button');
var menu = $('#site-menu > ul');

menuBtn.click(function(e) {
    e.preventDefault();
    menu.slideToggle();
});

// #2 MenuButton
$('#menu-button').click(function(e){
    e.preventDefault();
    $('#site-menu > ul').css('display', 'block');
    $('#site-menu > ul').slideToggle();
});

// HTML
<nav id="site-menu">
    <a href="#" id="menu-button"><i class="fa fa-navicon"></i></a>
    <figure><h1>Logo</h1></figure>
    <ul>
        <li><a data-href="site-bio">About</a></li>
        <li><a data-href="site-services">Services</a></li>
        <li><a data-href="site-my-work">Work</a></li>
    </ul>
</nav>

// CSS
#site-menu > ul {
    margin-bottom: 10%;
    li {
        display: inline-block;
        @include margin-left;
    }
    a {
        color: #FFF;
        font-weight: 100;
        @include a-hover;
    }
}

#menu-button {
    color: #fff;
    display: none;
    float: right;
    font-size: 40px;
    width: 40px;
    z-index: 99;
}

// Responsive CSS
#site-menu > ul {
    display: none;
}
#menu-button {
    display: block;
    position: fixed;
}