<ul>
 <a href=#t1>
   <li class="icon fa fa-home" id="i1"></li>
 </a>
 <a href=#t2>
   <li class="icon fa fa-keyboard-o" id="i2"></li>
 </a>
 <a href=#t3>
   <li class="icon fa fa-coffee" id="i3"></li>
 </a>
 <a href=#t4>
   <li class="icon fa fa-bed" id="i4"></li>
 </a>
</ul>

<div class="page" id="p1">
 <li class="icon fa fa-home">
   <span class="title">Home</span>
 </li>
</div>

<div class="page" id="p2">
 <li class="icon fa fa-keyboard-o">
   <span class="title">Type</span>
 </li>
</div>

<div class="page" id="p3">
 <li class="icon fa fa-coffee">
   <span class="title">Coffee</span>
 </li>
</div>

<div class="page" id="p4">
 <li class="icon fa fa-bed">
   <span class="title">Sleep</span>
 </li>
</div>

<div class="container" id="t1">
 <div class="container" id="t2">
   <div class="container" id="t3">
     <div class="container" id="t4">
       <section>
         <ul>
           <a href="#t1">
             <li class="icon fa fa-home" id="i1"></li>
           </a>
           <a href="#t2">
             <li class="icon fa fa-keyboard-o" id="i2"></li>
           </a>
           <a href="#t3">
             <li class="icon fa fa-coffee" id="i3"></li>
           </a>
           <a href="#t4">
             <li class="icon fa fa-bed" id="i4"></li>
           </a>
         </ul>
         <div class="page" id="p1">
           <li class="icon fa fa-home">
             <span class="title">Home</span>
           </li>
         </div>
         <div class="page" id="p2">
           <li class="icon fa fa-keyboard-o">
             <span class="title">Type</span>
           </li>
         </div>
         <div class="page" id="p3">
           <li class="icon fa fa-coffee">
             <span class="title">Coffee</span>
           </li>
         </div>
         <div class="page" id="p4">
           <li class="icon fa fa-bed">
             <span class="title">Sleep</span>
           </li>
         </div>
       </section>
     </div>
   </div>
 </div>
</div>

html,
body,
section,
.page {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 transition: all 1s cubic-bezier(0.5, -0.005, 0.2, 1) !important;
 -webkit-transition: all 1s cubic-bezier(0.5, -0.005, 0.2, 1) !important;
 color: #fff;
 background: #374046;
 overflow: hidden;
}

section {
 width: 400%;
}

.page {
 position: absolute;
}

#p1 {
 left: 0;
}
#p2 {
 left: 100%;
 background: #ff5722;
}
#p3 {
 left: 200%;
 background: #593c1f;
}
#p4 {
 left: 300%;
 background: #593c56;
}

#t1: target .page#p1 {
 transform: translateX(0);
}
#t2: target .page#p2 {
 transform: translateX(-90%);
}
#t3: target .page#p3 {
 transform: translateX(-190%);
}
#t4: target .page#p4 {
 transform: translateX(-290%);
}

#t2: target .page#p1 .icon,
#t3: target .page#p1 .icon,
#t4: target .page#p1 .icon {
 filter: blur(3px);
 -webkit-filter: blur(3px);
}

ul {
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 margin: auto;
 height: 280px;
 width: 10%;
 padding: 0;
 text-align: center;
}

ul li {
 margin: 30px 0;
}

a {
 text-decoration: none;
 font-family: sans-serif;
}

.icon {
 color: #fff;
 font-size: 32px;
 display: block;
}

ul .icon:hover {
 opacity: 0.6;
}

transform: scale(0.6);
transition-delay: 0.25s;