Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A CodePen by David Miller. Single page app CSS page slider with bonus minimalism - Forked. cleaner.
<div class="navigation">
<ul>
<li>
<a href="#left" class="link-left">Look at that left page</a>
</li>
<li>
<a href="#middle" class="link-middle">Look at that middle page</a>
</li>
<li>
<a href="#right" class="link-right">Look at that right page</a>
</li>
</ul>
</div><!-- /navs -->
<!--content-->
<div class="row">
<div class="slidecontainer">
<div class="slideable">
<div class="content-block">
<h1>Leftmost Content</h1>
<p>This is the content that lives on the leftmost slideypage</p>
</div><!--content-block-->
</div><!--left-->
<div class="slideable">
<div class="content-block">
<h1>Center Content</h1>
<p>This is the content that lives on the middle slideypage</p>
</div><!--content-block-->
</div><!--middle-->
<div class="slideable">
<div class="content-block">
<h1>Rightmost Content</h1>
<p>This is the content that lives on the right slideypage</p>
</div><!--content-block-->
</div><!--right-->
</div><!--slidecontainer-->
</div><!--row-->
$(".link-left").click(function(){
$(".slidecontainer").css("margin-left", "0%");
});
$(".link-middle").click(function(){
$(".slidecontainer").css("margin-left", "-100%");
});
$(".link-right").click(function(){
$(".slidecontainer").css("margin-left", "-200%");
});
body {
font-family: helvetica, sans;
background: #FFF;
}
.navigation{
width:100%;
}
.navigation ul {
overflow: hidden;
}
.navigation ul li {
display: inline;
}
.navigation ul li a {
display: block;
float: left;
margin-top: 2em;
margin-left:2em;
width: 100px;
text-decoration:none;
text-align:center;
color:#FFF;
background-color:#333;
padding: 0.6em;
border: 2px solid #111;
border-radius: 0.6em;
}
.row {
top:0px;
left:0px;
width:100%;
overflow: hidden;
}
.slidecontainer {
width:300%;
margin-left: -110%;
padding: 0px;
margin: 0px;
overflow: hidden;
/* transitions */
transition: margin-left 0.5s;
-webkit-transition: margin-left 0.5s;
-moz-transition: margin-left 0.5s;
-o-transition: margin-left 0.5s;
}
.slideable {
width:32%;
padding-right:0.66666%;
padding-left:0.66666%;
border: none;
margin: none;
padding: none;
float: left;
}
.content-block {
margin-left: 2em;
margin-right:2em;
}
h1 {
padding-bottom: 0.3em;
border-bottom: 5px dashed #111;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.