Push Left Menu Responsive HTML5

http://blog.kangrian.com

by vi161

HTML

<nav id="menu" class="panel">
    <img src="http://1.bp.blogspot.com/-LIi60G19CM4/UgP9-c_6RhI/AAAAAAAAEO4/ues6OHGIsiM/s1600/topSpot-logo.png" width="40">
    <ul>
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">About</a>

        </li>
        <li><a href="#">Contact</a>

        </li>
        <li><a href="#">Sitemap</a>

        </li>
        <li><a href="#">Archive</a>

        </li>
    </ul>
</nav>
<div class="masthead">
    <div class="push">
        <a href="#menu" class="menu-link">&#9776;</a>
        <h1>JUDUL</h1>
        <p>// Dekripsi... //</p>
        <p class="right-txt">
          lorem ipsum
        </p>
    </div>
</div>

CSS

*, body {
    margin:0;
    overflow:hidden;
}
a {
    text-decoration:none;
}
#menu ul, #menu li {
    list-style:none;
    margin: 0px;
    padding: 0px;
}
.masthead h1 {
    text-align: center;
    font-size: 4em;
    margin: 0px;
    line-height: 1;
}
.masthead p {
    text-align: center;
    font-size: 1.125em;
    margin: .5em 0;
}
.push {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}
.masthead {
    background: #34495D;
    color: #fff;
    position: relative;
}
.menu-link {
    position: absolute;
    font-size: 1.5em;
    z-index:9999
}
.menu-link:link, .menu-link:visited {
    color: #fff;
    background: rgba(0, 0, 0, .5);
    border-radius: 4px;
    padding: .2em .4em;
}
.menu-link:hover, .menu-link:active {
    color: #25B89A;
    background: rgba(0, 0, 0, .7);
}
.panel {
    background: #2C3E50;
    z-index: 9999;
    position: fixed;
}
.panel ul {
    border-top: 2px solid #34495D;
}
.panel img {
    display: block;
    margin: 0px auto;
    padding: 1em 0px;
}
.panel img:hover {
    -webkit-transition: all 0.7s linear;
    transition: all 0.7s;
    transform: rotate(6.28rad);
    -webkit-transform: rotate(6.28rad);
}
.panel a {
    display: block;
    border-bottom: 2px solid #34495D;
    padding: 1em;
}
.panel a:link, .panel a:visited {
    color: #fff;
}
.panel a:hover, .panel a:active {
    background: #25B89A;
}
.right-txt {
  float: right;
}

JavaScript

(function ($) {
    'use strict';
    $.fn.menuSlide = function (options) {
        var settings = $.extend({
            'menu': ('#menu'),
            'push': ('.push'),
            'menuWidth': '15em',
            'speed': '300'
        }, options);
        
        var menuLink = this,
            menu = $(settings.menu),
            push = $(settings.push),
            width = settings.menuWidth;

        var positionOffScreen = {
            'position': 'fixed',
            'top': '0',
            'bottom': '0',
            'left': '-' + settings.menuWidth,
            'width': settings.menuWidth,
            'height': '100%'
        };

        var animateSlide = {
            '-webkit-transition': 'left ' + settings.speed + 'ms ease',
                '-moz-transition': 'left ' + settings.speed + 'ms ease',
                '-ms-transition': 'left ' + settings.speed + 'ms ease',
                '-o-transition': 'left ' + settings.speed + 'ms ease',
                'transition': 'left ' + settings.speed + 'ms ease'
        };

        menu.css(positionOffScreen);

        menuLink.on('click.menuSlide', function () {

            menu.css(animateSlide);
            push.css(animateSlide);

            menu.toggleClass('slide');
            push.toggleClass('slide');

            if (menu.hasClass('slide') === true) {
                menu.css('left', '0');
            } else {
                menu.css('left', '-' + width);
            }

            if (push.hasClass('slide') === true) {
                push.css('left', width);
            } else {
                push.css('left', '0');
            }
            return false;
        });
    };
}(jQuery));

$(document).ready(function () {
    $('.menu-link').menuSlide();
});