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>
        /* were using modernizr this would be the fallback for non 3d capable devices */
        .no-csstransforms3d .page-wrap.slide-left {
            left:220px;
        }
        .no-csstransforms3d .page-wrap.slide-right {
            left:-220px;
        }
    </style>
<![endif]-->
<!--[if lt IE 8 ]>
    <style>
        /* ie7 overflow hidden bug fix */
        #container {
            position:relative;
        }
        /* active link background for ie7 instead of pseudoelement */
        .slide-menu ul li.active a {
            background-color:#666;
        }
    </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...

CSS

<style type='text/css'>
/* Enable box model n resets */
 * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    margin:0;
    font-size:16px;
    font-family:"Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
}
/* Hidden Scrollbars */
 #container {
    overflow: hidden;
}
/* Reset for the page-wrapper */
 .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;
    /* Transforms Reset */
    -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;
}

/* If Slide page-wrap offsets left or right */
 .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);
}
/* Menu Branding */
 .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 
Due to the translate3d some focus of the right menu a and Span tags were showing offset on android ICS
*/
.slide-menu.right-side a, .slide-menu.right-side span{ ...

JavaScript

/*document.body.scrollTop = 1;
document.body.scrollTop = 0;*/

function OpenMenu(theTarget) {
    $('.page-wrap').toggleClass(theTarget);
}

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

$('.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');