Side Slide

by Charles Butler

HTML

<div class="wrapper">
   
    <div class="slide current" id="slide1">
    <div class="inner">
          <h1>WELCOME MESSAGE HERE</h1>
          <div class="navigation">
          <a class="button" id="2">LINK TO SLIDE 2</a>
          <a class="button" id="3">LINK TO SLIDE 3</a>
          <a class="button" id="4">LINK TO SLIDE 4</a>
          <a class="button" id="5">LINK TO SLIDE 5</a>
          <a class="button" id="6">LINK TO SLIDE 6</a>
          <a class="button" id="7">LINK TO SLIDE 7</a>
          <a class="button" id="8">LINK TO SLIDE 8</a>
          </div>
    </div>
    </div>
 
    <div class="slide" id="slide2">
    <div class="content">
          <div>SLIDE 2 DYNAMIC CONTENT LOADS HERE</div>
          <div class="navigation">
          <a class="button" id="3">LINK TO SLIDE 3</a>
          <a class="button" id="4">LINK TO SLIDE 4</a>
          <a class="button" id="5">LINK TO SLIDE 5</a>
          <a class="button" id="6">LINK TO SLIDE 6</a>
          <a class="button" id="7">LINK TO SLIDE 7</a>
          <a class="button" id="8">LINK TO SLIDE 8</a>
          </div>
    </div>
    </div>
    
    <div class="slide" id="slide3">
    <div class="content">
          <div>SLIDE 3 DYNAMIC CONTENT LOADS HERE</div>
          <div class="navigation">
          <a class="backbutton" id="2">BACK TO SLIDE 2</a>
          <a class="button" id="4">LINK TO SLIDE 4</a>
          <a class="button" id="5">LINK TO SLIDE 5</a>
          <a class="button" id="6">LINK TO SLIDE 6</a>
          <a class="button" id="7">LINK TO SLIDE 7</a>
          <a class="button" id="8">LINK TO SLIDE 8</a>
          </div>
    </div>
    </div>

    <div class="slide" id="slide4">
    <div class="content">
          <div>SLIDE 4 DYNAMIC CONTENT LOADS HERE</div>
          <div class="navigation">
          <a class="backbutton" id="2">BACK TO SLIDE 2</a>
          <a class="backbutton" id="3">BACK TO SLIDE 3</a>
          <a class="button" id="5">LINK TO SLIDE 5</a>
          <a...

CSS

html, body{
	width:100%;
    height:100%;
	padding:0px;
	margin:0px; 
	overflow: hidden; 
}
.wrapper {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;  
    
}
.slide{
	position: absolute;
    width: 200%;
    height: 100%;
    font-size: 30px;
    text-align: center;
    border: 2px solid black;
    left: 100%;
	top:0px;
}
.navigation{
	font-size:14px;
}
.navigation a{
	display:block;
	background-color:#000;
	color:#fff;
	padding:5px;
	float:left;
	margin-right:5px;
}
#slide1{
	background-color:#0CF;
	width:100%;
    left: 0%;
}
.inner{
	width:960px;
	height:100%;
	background-color:#fff;
	margin-left:auto;
	margin-right:auto;
}
#slide2{
	background-color:#F00;
}
#slide3{
	background-color:#FC0;
}
#slide4{
	background-color:#F3C;
}
#slide5{
	background-color:#090;
}
#slide6{
	background-color:#F30;
}
#slide7{
	background-color:#609;
}
#slide8{
	background-color:#03F;
}

.content{
	width:30%;
	height:80%;
	float:right;
	background-color:#fff;
	margin:10%;
}

JavaScript

$('.button').click(function() {
    var id = this.id;
    $('#slide'+id+'').each(function() {
        if ($(this).offset().left < 0) {

        } else {
			$('.current').animate({ left: '-200%', }, 1500 );
			
            $(this).animate({ left: '-100%', }, 1500 );
			
			$(".current").removeClass("current").addClass('visited');
			$(this).addClass("current");
			

        }
    });
});