Push menu with Transform3D (simple)

Left and Right Cross Browser ie7+ Push Menu example with Transform3d and fallback for non 3D capable browsers using Modernizr

by lovromar

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<!--[if lt IE 10 ]>
    <style>
        .no-csstransforms3d .page-wrap.slide-left {
            left:220px;
        }
        .no-csstransforms3d .page-wrap.slide-right {
            left:-220px;
        }
    </style>
<![endif]-->
<div id="container">
    <div class="page-wrap">
        <div class="slide-menu left-side">
            <div class="menuTop">
                 <h2>Push Menu</h2><span></span>

            </div>
            <ul>
                <li><a href="#">Menu Link 001</a>

                </li>
                <li><a href="#">Menu Link 002</a>

                </li>
                <li class="active"><a href="#">Menu Link 003</a>

                </li>
                <li><a href="#">Menu Link 004</a>

                </li>
                <li><a href="#">Menu Link 005</a>

                </li>
            </ul>
        </div>
        <div class="slide-menu right-side">
            <div class="menuTop">
                 <h2>Push Menu</h2><span></span>

            </div>
            <ul>
                <li><a href="#">Menu Link 001</a>

                </li>
                <li><a href="#">Menu Link 002</a>

                </li>
                <li><a href="#">Menu Link 003</a>

                </li>
                <li class="active"><a href="#">Menu Link 004</a>

                </li>
                <li><a href="#">Menu Link 005</a>

                </li>
            </ul>
        </div>
        <div for="toggle" class="handle"><span class="left"></span>
 <span class="logo"></span>
 <span class="right"></span>

        </div>
        <div class="content">
             <h1>Irristagarri Mugikor Nabigazioa</h1>

            <p>Batzar Nagusiak[aldatu] Hasieran, bere kideek beraien udalerrien ordezkari bezala hautatuak izaten ziren, baina gero Euskal Herriko edozein lekutakoak izan zitezkeen. Batzarrak urtean behin biltzen ziren hamaika egunez....

CSS

<style type='text/css'> * {
    box-sizing: border-box;
}
html, body {
    margin:0;
    font-size:16px;
    font-family:"Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
}
#container {
    overflow: hidden;
}
.page-wrap {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    /* */
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    /* */
    background: #f6f3fe;
    position: relative;
}
.page-wrap.slide-left {
    -webkit-transform: translate3d(220px, 0, 0);
    -moz-transform: translate3d(220px, 0, 0);
    -ms-transform: translate3d(220px, 0, 0);
    -o-transform: translate3d(220px, 0, 0);
    transform: translate3d(220px, 0, 0);
}
.page-wrap.slide-right {
    -webkit-transform: translate3d(-220px, 0, 0);
    -moz-transform: translate3d(-220px, 0, 0);
    -ms-transform: translate3d(-220px, 0, 0);
    -o-transform: translate3d(-220px, 0, 0);
    transform: translate3d(-220px, 0, 0);
}
.slide-menu {
    background: #333333;
    width: 220px;
    height: 100%;
    position: absolute;
}
.slide-menu.left-side {
    left:-220px;
    box-shadow: -10px 0px 40px rgba(0, 0, 0, 0.55) inset;
    text-align: left;
}
.slide-menu.right-side {
    right:-220px;
    box-shadow: 10px 0px 40px rgba(0, 0, 0, 0.55) inset;
    text-align: right;
}
/* fix crazy focus on right menu elements in android */
 .slide-menu.right-side a, .slide-menu.right-side .menuTop span {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slide-menu .menuTop {
    overflow:hidden;
}
.slide-menu .menuTop h2 {
    color:#fff;
    margin:.35em 0;
}
.slide-menu.left-side .menuTop h2 {
   ...

JavaScript

function OpenMenu(theTarget) {
    $('.page-wrap').toggleClass(theTarget).promise().done(function () {
        setTimeout(function () {
            $('body').toggleClass('openedFlag');
        }, 300);
    });
}

function CloseMenu() {
    if ($('.page-wrap').hasClass('slide-left')) {
        $('.page-wrap').toggleClass('slide-left');
        $('body').toggleClass('openedFlag');
    } else if ($('.page-wrap').hasClass('slide-right')) {
        $('.page-wrap').toggleClass('slide-right');
        $('body').toggleClass('openedFlag');
    }
}

$('.handle .left').click(function () {
    OpenMenu('slide-left');
});

$('.handle .right').click(function () {
    OpenMenu('slide-right');
});

$('.slide-menu .menuTop span, .content').click(function () {
    CloseMenu();
});

//OpenMenu('slide-left');