<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<input type="radio" name="nav" id="nav1" checked="checked"/>
<input type="radio" name="nav" id="nav2"/>
<input type="radio" name="nav" id="nav3"/>
<input type="radio" name="nav" id="nav4"/>
<div class="tabs">
<label class="tab" for="nav1"><i class="material-icons">account_box</i></label>
<label class="tab" for="nav2"><i class="material-icons">camera</i></label>
<label class="tab" for="nav3"><i class="material-icons">email</i></label>
<label class="tab" for="nav4"> <i class="material-icons">favorite</i></label>
</div>
<div class="panels">
<div class="panel c1">
<div class="info"><i class="material-icons">looks_one</i> Hi! You made it</div>
</div>
<div class="panel c2">
<div class="info"><i class="material-icons">camera_alt</i> You can't take a picture</div>
</div>
<div class="panel c3">
<div class="info"><i class="material-icons">markunread_mailbox</i> Your to young to know how to work snail mail</div>
</div>
<div class="panel c4">
<div class="info"><i class="material-icons">store_mall_directory</i> No place like home</div>
</div>
</div>
</div>
html, body {
padding: 0px;
margin: 0px;
background: linear-gradient(to top right, #475, #465);
font-family: 'Ubuntu', sans-serif;
color: #FFF;
height: 100%;
}
body {
padding-top: 40px;
}
body * {
box-sizing: border-box;
padding: 0px;
margin: 0px;
border: none;
}
.container {
max-width: 400px;
min-height: 200px;
background: #FFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
margin: auto;
border-radius: 3px;
color: #000;
display: flex;
flex-direction: column;
}
.tabs {
position: relative;
display: flex;
border-bottom: 4px solid rgba(0, 0, 0, 0.1);
height: 40px;
}
.tabs :after {
content: ' ';
border-bottom: 4px solid #444;
width: 25%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
transition: all 0.25s;
pointer-events: none;
}
.tabs .tab {
flex: 1;
text-align: center;
height: 40px;
}
.tabs .tab i {
font-size: 28px;
line-height: 40px;
}
.tabs .tab:hover {
background: rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.panels {
flex: 1;
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
border-radius: 0px 0px 2px 2px;
}
.panels .panel {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
right: 0px;
transition: all 1s;
font-size: 24px;
background: #cdc;
opacity: 1;
color: white;
display: flex;
text-align: center;
}
.panels .panel.c1 {
background: linear-gradient(to left, #465, #454);
}
.panels .panel.c2 {
background: linear-gradient(to left, #f44, #e22);
}
.panels .panel.c3 {
background: linear-gradient(to left, #449, #339);
}
.panels .panel.c4 {
background: linear-gradient(to left, #f59, #f79);
}
.panels .panel .info {
flex: 1;
margin: auto;
}
.panels .panel .info i {
vertical-align: middle;
font-size: 48px;
}
input[name="nav"] {
display: none;
}
input[name="nav"]:nth-of-type(1):checked ~ .tabs :after {
transform: translateX(0%);
}
input[name="nav"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) {
background: rgba(0, 0, 0, 0.1);
}
input[name="nav"]:nth-of-type(1):checked ~ .panels .panel:nth-of-type(1) {
transform: translateX(0%);
transition: transform 0.5s;
z-index: 10;
opacity: 1;
}
input[name="nav"]:nth-of-type(1):checked ~ .panels .panel:nth-of-type(0) {
transform: translateX(-100%);
}
input[name="nav"]:nth-of-type(1):checked ~ .panels .panel:nth-of-type(2) {
transform: translateX(100%);
}
input[name="nav"]:nth-of-type(1):checked ~ .panels .panel:nth-of-type(3) {
transform: translateX(100%);
}
input[name="nav"]:nth-of-type(1):checked ~ .panels .panel:nth-of-type(4) {
transform: translateX(100%);
}
input[name="nav"]:nth-of-type(1):checked ~ .panels .panel:nth-of-type(5) {
transform: translateX(100%);
}
input[name="nav"]:nth-of-type(2):checked ~ .tabs :after {
transform: translateX(100%);
}
input[name="nav"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) {
background: rgba(0, 0, 0, 0.1);
}
input[name="nav"]:nth-of-type(2):checked ~ .panels .panel:nth-of-type(2) {
transform: translateX(0%);
transition: transform 0.5s;
z-index: 10;
opacity: 1;
}
input[name="nav"]:nth-of-type(2):checked ~ .panels .panel:nth-of-type(1) {
transform: translateX(-100%);
}
input[name="nav"]:nth-of-type(2):checked ~ .panels .panel:nth-of-type(0) {
transform: translateX(-100%);
}
input[name="nav"]:nth-of-type(2):checked ~ .panels .panel:nth-of-type(3) {
transform: translateX(100%);
}
input[name="nav"]:nth-of-type(2):checked ~ .panels .panel:nth-of-type(4) {
transform: translateX(100%);
}
input[name="nav"]:nth-of-type(2):checked ~ .panels .panel:nth-of-type(5) {
transform: translateX(100%);
}
input[name="nav"]:nth-of-type(3):checked ~ .tabs :after {
transform: translateX(200%);
}
input[name="nav"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) {
background: rgba(0, 0, 0, 0.1);
}
input[name="nav"]:nth-of-type(3):checked ~ .panels .panel:nth-of-type(3) {
transform: translateX(0%);
transition: transform 0.5s;
z-index: 10;
opacity: 1;
}
input[name="nav"]:nth-of-type(3):checked ~ .panels .panel:nth-of-type(2) {
transform: translateX(-100%);
}
input[name="nav"]:nth-of-type(3):checked ~ .panels .panel:nth-of-type(1) {
transform: translateX(-100%);
}
input[name="nav"]:nth-of-type(3):checked ~ .panels .panel:nth-of-type(0) {
transform: translateX(-100%);
}
input[name="nav"]:nth-of-type(3):checked ~ .panels .panel:nth-of-type(4) {
transform: translateX(100%);
}
input[name="nav"]:nth-of-type(3):checked ~ .panels .panel:nth-of-type(5) {
transform: translateX(100%);
}
input[name="nav"]:nth-of-type(4):checked ~ .tabs :after {
transform: translateX(300%);
}
input[name="nav"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) {
background: rgba(0, 0, 0, 0.1);
}
input[name="nav"]:nth-of-type(4):checked ~ .panels .panel:nth-of-type(4) {
transform: translateX(0%);
transition: transform 0.5s;
z-index: 10;
opacity: 1;
}
input[name="nav"]:nth-of-type(4):checked ~ .panels .panel:nth-of-type(3) {
transform: translateX(-100%);
}
input[name="nav"]:nth-of-type(4):checked ~ .panels .panel:nth-of-type(2) {
transform: translateX(-100%);
}
input[name="nav"]:nth-of-type(4):checked ~ .panels .panel:nth-of-type(1) {
transform: translateX(-100%);
}
input[name="nav"]:nth-of-type(4):checked ~ .panels .panel:nth-of-type(0) {
transform: translateX(-100%);
}
input[name="nav"]:nth-of-type(4):checked ~ .panels .panel:nth-of-type(5) {
transform: translateX(100%);
}
