CSS Only Page Slider with :target

IE9+

by sjmcpherson

HTML

<div class="content">
	<a href="#portfolio">Next Page</a>
	<div class="panel" id="portfolio">
    	<a href="#portfolio" class="open">Open</a>
        <a href="#" class="back">Back</a>
    </div>
</div>

CSS

html, body{height:100%;}
body{   
overflow-x: hidden;
overflow-y: auto;
width: 100%;margin:0;
background-color:#fff;
}
.content{display:block;height:100%;width:100%;position:relative;}
.content a{padding:30px 5px;display:block;}
.panel {
    background-color: #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-right: -95%;
    min-height: 100%;
    position: absolute;
	right:0;
    box-sizing:border-box;
	top:0;
    overflow-y: auto;
    overflow-x: hidden;
	z-index: 2;
	-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;
    width: 100%;
    display:block;
}
.panel a.open{float:left;}
.panel a.back{float:left;}
#portfolio:target {
    background-color:#fff;
    margin-right:-0%;
}
#portfolio:target a.open{
  display:none
}