multi-level-push-menu

by adama gomis

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">
<script src="http://oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script>
<!--[if lt IE 7]>
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="pushobj">Some content here!</div>
<div id="menu">
    <nav>
         <h2><i class="fa fa-reorder"></i>All Categories</h2>

        <ul>
            <li> <a href="#"><i class="fa fa-laptop"></i>Devices</a>

                 <h2><i class="fa fa-laptop"></i>Devices</h2>

                <ul>
                    <li> <a href="#"><i class="fa fa-phone"></i>Mobile Phones</a>

                         <h2><i class="fa fa-phone"></i>Mobile Phones</h2>

                        <ul>
                            <li> <a href="#">Super Smart Phone</a>

                            </li>
                            <li> <a href="#">Thin Magic Mobile</a>

                            </li>
                            <li> <a href="#">Performance Crusher</a>

                            </li>
                            <li> <a href="#">Futuristic Experience</a>

                            </li>
                        </ul>
                    </li>
                    <li> <a href="#"><i class="fa fa-desktop"></i>Televisions</a>

                         <h2><i class="fa fa-desktop"></i>Televisions</h2>

                        <ul>
                            <li> <a href="#">Flat Super Screen</a>

                            </li>
                            <li> <a href="#">Gigantic LED</a>

                            </li>
                            <li> <a href="#">Power Eater</a>

                            </li>
                            <li> <a href="#">3D Experience</a>

                            </li>
                            <li> <a href="#">Classic...

CSS

body {
    margin: 0;
    padding: 0;
    background: #243342;
}
#pushobj {
    position: absolute;
    top: 0px;
    left: 300px;
    color: #fff;
    background: #243342;
    font-family:'Open Sans Condensed', sans-serif;
    font-size: 2em;
    z-index: 1;
}
.multilevelpushmenu_wrapper {
    position: absolute;
    overflow: hidden;
    min-width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
.multilevelpushmenu_wrapper .levelHolderClass {
    position: absolute;
    overflow: hidden;
    top: 0;
    background: #336ca6;
    width: auto;
    min-height: 100%;
    font-family:'Open Sans Condensed', sans-serif;
    font-size: 1em;
    zoom: 1;
}
.multilevelpushmenu_wrapper .ltr {
    margin-left: -100%;
    left: 0;
    -moz-box-shadow: 5px 0 5px -5px #1f4164;
    -webkit-box-shadow: 5px 0 5px -5px #1f4164;
    box-shadow: 5px 0 5px -5px #1f4164;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#1f4164, direction=90, strength=2);
}
.multilevelpushmenu_wrapper .rtl {
    margin-right: -100%;
    right: 0;
    -moz-box-shadow: 5px 0 5px 5px #1f4164;
    -webkit-box-shadow: 5px 0 5px 5px #1f4164;
    box-shadow: 5px 0 5px 5px #1f4164;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#1f4164, direction=270, strength=2);
}
.multilevelpushmenu_wrapper .multilevelpushmenu_inactive {
    background: #2e6196;
}
.multilevelpushmenu_wrapper h2 {
    font-size: 1.5em;
    line-height: 1em;
    font-weight: bold;
    color: #1f4164;
    padding: 0 .4em 0 .4em;
}
.multilevelpushmenu_wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.multilevelpushmenu_wrapper li {
    cursor: pointer;
    border-top: 1px solid #295685;
    padding: .4em .4em .4em .4em;
}
.multilevelpushmenu_wrapper li:last-child {
    border-bottom: 1px solid #295685;
}
.multilevelpushmenu_wrapper li:hover {
    background-color: #295685;
}
.multilevelpushmenu_wrapper a {
    display: block;
    outline: none;
    overflow: hidden;
    font-size: 1.5em;
   ...

JavaScript

(function (a) {
    a.fn.multilevelpushmenu = function (c) {
        var b = arguments;
        returnValue = null;
        this.each(function () {
            var M = this,
                o = a(this),
                k = (o.context != undefined) ? o : a("body"),
                T = (c && c.menu != undefined) ? c.menu : o.find("nav"),
                I, f;
            var R = a.extend({
                container: k,
                containersToPush: null,
                menuID: ((k.prop("id") != undefined && k.prop("id") != "") ? k.prop("id") : this.nodeName.toLowerCase()) + "_multilevelpushmenu",
                wrapperClass: "multilevelpushmenu_wrapper",
                menuInactiveClass: "multilevelpushmenu_inactive",
                menu: T,
                menuWidth: 0,
                menuHeight: 0,
                collapsed: false,
                fullCollapse: false,
                direction: "ltr",
                backText: "Back",
                backItemClass: "backItemClass",
                backItemIcon: "fa fa-angle-right",
                groupIcon: "fa fa-angle-left",
                mode: "overlap",
                overlapWidth: 40,
                preventItemClick: true,
                preventGroupItemClick: true,
                swipe: "both",
                onCollapseMenuStart: function () {},
                onCollapseMenuEnd: function () {},
                onExpandMenuStart: function () {},
                onExpandMenuEnd: function () {},
                onGroupItemClick: function () {},
                onItemClick: function () {},
                onTitleItemClick: function () {},
                onBackItemClick: function () {},
                onMenuReady: function () {}
            }, c);
            if (!a.data(M, "plugin_multilevelpushmenu")) {
                a.data(M, "plugin_multilevelpushmenu", R);
                M.settings = a.data(M, "plugin_multilevelpushmenu")
            }
            var E = {
                init:...