JSFiddle - React, Tailwind, and code Playground

by Joe Pigott

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div id='header'>
    <button id='mb2'><span class='glyphicon glyphicon-align-justify'></span></button>
    <a class='a' href="">link1</a>
    <a class='a' href="">link2</a>
    <a class='a' href="">link3</a>
    <a class='a' href="">link4</a>
</div>
<button id='mb1'> 
    <span class='glyphicon glyphicon-align-justify'></span>
</button>

CSS

#header {
    width: 100%;
    height: 30px;
    background: #dadae3
}
.a {
    float: right;
    margin-left: 5px;
    margin-right: 5px;
}
button {
    height: 25px;
    background: transparent;
    border: 0;
    color: #73318e
}
button:hover {
    color: #371e41
}

JavaScript

$(document).ready(function(){
    $('#header').hide();
    $('#mb1').click(function(){
        $(this).slideUp();
        $('#header').slideDown();
        $('#mb2').slideDown();
    });
    $('#mb2').click(function(){
        $(this).slideUp();
        $('#mb1').slideDown();
        $('#header').slideUp();
    });
});