Mobile Menu

by Dennis Betman

HTML

<div class="wrapper">
    <div class="mobile">
        <div class="nog">
            <div class="test">
                <div class="open"></div>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
                <p>dddd</p>
                <br/>
  ...

CSS

* {
    margin:0px;
    padding:0px;
    color:black;
}
body {
    background:#a85975;
    width:100%;
    overflow-x:hidden;
}
.wrapper {
    float:left;
    width:100%;
    display:block;
    overflow-x:hidden;
}
.mobile {
    position:relative;
    width:100%;
    box-sizing:border-box;
}
.nog{
    height: 100%;
    width: 100%;
    position: relative;
}
.test {
    color:white;
    width:100%;
    background:white;
    box-sizing:border-box;
}
.open {
    position: absolute;
    width:50px;
    height: 50px;
    background:lightgreen;
    margin:15px;
    cursor:pointer;
}

JavaScript

var getH = $(window).height();
var menuOpen = false;

$(".open").click(function () {
    if (!menuOpen) {
        $(".mobile").stop().animate({
            "margin-left": "70%",
            "padding": "20px 0px"
        }, 500).css({
            "overflow": "hidden"
        });
        $(".nog").css({"overflow":"hidden"});
        menuOpen = true;
    } else if (menuOpen) {
        $(".mobile").stop().animate({
            "margin-left": "0%",
            "padding": "0px 0px"
        }, 500).css({
            "overflow": "auto",
            "overflow-x": "hidden"
        });
        $(".nog").css({"overflow":"auto"});
        menuOpen = false;
    }
});

$(".wrapper").css({
    "height": getH
});
$(".mobile").css({
    "height": getH
});
$(".test").css({
    "min-height": getH
});