davidcl64/index.html

## index.html
<!DOCTYPE html>
<head>
	<meta charset="utf-8">

    <!-- Needed to get IE into standards mode -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <style>
    html, body { margin: 0; border: 0; padding: 0; }

    div {
        background-color: #ddd;
        background-color: rgba(0,0,0,.10);
        position: absolute;
        box-sizing: border-box;
        border: 1px solid #999;
        border: 1px solid rgba(0,0,0,.15);
        -webkit-transition: all .5s ease;
           -moz-transition: all .5s ease;
            -ms-transition: all .5s ease;  /* Kicks in for ie10+ */
             -o-transition: all .5s ease;
                transition: all .5s ease;
    }

    .wrapper {
        position: absolute;
        top: 0;
        left: -200px;
        right: 0;
        bottom: 0;
    }


    .menu {
        top: 0;
        bottom: 0;
        left: 0;
        width: 200px;
    }

    .main {
        top: 0;
        left: 200px;
        right: 0;
        bottom: 0;
    }

    .header {
        top: 0;
        left: 0;
        right: 0;
        height: 40px;
    }

    .menuActivator {
        top: 10px;
        left: 10px;
        width: 20px;
        height: 20px;
    }

    .menuOn .wrapper {
        -webkit-transform: translate3d(200px, 0, 0);
           -moz-transform: translate3d(200px, 0, 0);
            -ms-transform: translate(200px, 0);       /* Kicks in for ie9+ */
             -0-transform: translate3d(200px, 0, 0);
                transform: translate3d(200px, 0, 0);
    }

    </style>

	<!--[if lte IE 8]>
    <style>
    div {
        background-color: #ddd; /* for ie7 this has to be overridden here */
    }

    .menuOn .wrapper {
        left: 0px;
        right: -200px;
    }
    </style>
    <![endif]-->

</head>
<body id="body">

    <div class="wrapper">
        <div class="menu">
            <ul>
                <li>Menu item 1</li>
                <li>Menu item 2</li>
                <li>Menu item 3</li>
                <li>Menu item 4</li>
                <li>Menu item 5</li>
            </ul>
        </div>

        <div class="main">
            <div class="header"><div id="menuActivator" class="menuActivator"></div></div>
        </div>
    </div>


    <script>
    (function() {
        var menuActivator = document.getElementById("menuActivator");
        var body          = document.getElementById('body');

        // Not DRY - just a quick implementation as an example
        if(window.AddEventListener) {
            window.addEventListener("load", function() {
                menuActivator.addEventListener('click', function(e) {
                    body.classList.toggle('menuOn');
                });
            }, false);
        } else {
            window.attachEvent('onload', function() {
                menuActivator.attachEvent('onclick', function(e) {
                    body.className = body.className.length > 0 ? "" : ('menuOn');
                });
            });
        }
    })();
    </script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">

	<!-- Needed to get IE into standards mode -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<style>
	html, body { margin: 0; border: 0; padding: 0; }

	div {
	background-color: #ddd;
	background-color: rgba(0,0,0,.10);
	position: absolute;
	box-sizing: border-box;
	border: 1px solid #999;
	border: 1px solid rgba(0,0,0,.15);
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease; /* Kicks in for ie10+ */
	-o-transition: all .5s ease;
	transition: all .5s ease;
	}

	.wrapper {
	position: absolute;
	top: 0;
	left: -200px;
	right: 0;
	bottom: 0;
	}


	.menu {
	top: 0;
	bottom: 0;
	left: 0;
	width: 200px;
	}

	.main {
	top: 0;
	left: 200px;
	right: 0;
	bottom: 0;
	}

	.header {
	top: 0;
	left: 0;
	right: 0;
	height: 40px;
	}

	.menuActivator {
	top: 10px;
	left: 10px;
	width: 20px;
	height: 20px;
	}

	.menuOn .wrapper {
	-webkit-transform: translate3d(200px, 0, 0);
	-moz-transform: translate3d(200px, 0, 0);
	-ms-transform: translate(200px, 0); /* Kicks in for ie9+ */
	-0-transform: translate3d(200px, 0, 0);
	transform: translate3d(200px, 0, 0);
	}

	</style>

	<!--[if lte IE 8]>
	<style>
	div {
	background-color: #ddd; /* for ie7 this has to be overridden here */
	}

	.menuOn .wrapper {
	left: 0px;
	right: -200px;
	}
	</style>
	<![endif]-->

	</head>
	<body id="body">

	<div class="wrapper">
	<div class="menu">
	<ul>
	<li>Menu item 1</li>
	<li>Menu item 2</li>
	<li>Menu item 3</li>
	<li>Menu item 4</li>
	<li>Menu item 5</li>
	</ul>
	</div>

	<div class="main">
	<div class="header"><div id="menuActivator" class="menuActivator"></div></div>
	</div>
	</div>


	<script>
	(function() {
	var menuActivator = document.getElementById("menuActivator");
	var body = document.getElementById('body');

	// Not DRY - just a quick implementation as an example
	if(window.AddEventListener) {
	window.addEventListener("load", function() {
	menuActivator.addEventListener('click', function(e) {
	body.classList.toggle('menuOn');
	});
	}, false);
	} else {
	window.attachEvent('onload', function() {
	menuActivator.attachEvent('onclick', function(e) {
	body.className = body.className.length > 0 ? "" : ('menuOn');
	});
	});
	}
	})();
	</script>
	</body>
	</html>