wide menu on left

by tmoura

HTML

<nav class="main-nav" id="main-nav"> <a href="#">1</a>
 <a href="#">2</a>
 <a href="#">3</a>
 <a href="#">4</a>

    <a
    href="#">5</a> <a href="#">6</a>

</nav>
<div class="page-wrap">
    <header class="main-header"> <a href="#main-nav" class="open-menu menu-button">
                                ☰
                        </a>
 <a href="#" class="close-menu menu-button">
                                ☰
                        </a>

    </header>
    <div class="content">
        <p>It’s all about playing four quarters. I think we played well but the other
            team played well too. They took advantage of certain circumstances that
            arose. It’s a physical game.</p>
    </div>
</div>

CSS

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin:0;
    padding:0;
}
html, body {
    min-height: 100%;
}
a {
    text-decoration: none;
}
.main-header {
    height:40px;
    background: #3f94bf;
    padding: 5px;
    position: fixed;
    width: 100%;
    left: 0;
}
.main-header a {
    position: absolute;
    left: 20px;
    top: 0px;
    color: white;
    font-size: 32px;
}
.page-wrap {
    float: right;
    width: 100%;
}
.main-nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #3B3B3B;
    overflow: hidden;
}
.main-nav a {
    display: block;
    background: #3e3e3e;
    border-top: 1px solid #484848;
    border-bottom: 1px solid #2E2E2E;
    color: white;
    padding: 15px;
}
.main-nav a:hover, .main-nav a:focus {
    background: #484848;
}
.main-nav:after {
    content:"";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 34px;
}
.content {
    padding: 70px 20px 20px 20px;
}
.close-menu {
    display: none;
}

JavaScript

$('#main-nav').hide();
 $('.menu-button').click(function () {
     $('#main-nav').animate({
         width: 'toggle'
     });
 });