CSS SlideIn Panel with :target

by sjmcpherson

HTML

<div class="content">
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
    <a href="#Open">Open</a>
    <div id="Open"><a href="#">Back</a> 

    </div>
</div>

CSS

*{
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}
html, body{height:100%;}
body{   
	overflow-x: hidden;
	overflow-y: auto;
	width: 100%;margin:0;
	background-color:#ff0000;	
}
.content {
    background: #ccc;
    width: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}
.content div {
	position: absolute;
	overflow: hidden;
	background: lightblue;
	width: 0%;
    top:0;
    min-height: 100%;
	right: -100%;   box-shadow: 0 0 5px #888888;
}
.content > div:target {
	right: 0;
	width: 98%;
}

JavaScript

$(function(){
	$("a[href^=#]").on("click", function(e) {
		  page = $(this).attr('href');
		  if ($.browser.msie && $.browser.version>8 || !$.browser.msie) 
		  {
			url = window.location.href.split('#')[0];
			text = url + page;
			history.replaceState({}, "", text);
		  }

	});
});