<nav class="vertical">
<input type="checkbox" id="toggle2" />
<label for="toggle2">
<span class="fa fa-bars"></span>
</label>
<menu>
<li><a class="fa fa-home" href="#"></a></li>
<li><a class="fa fa-user" href="#"></a></li>
<li><a class="fa fa-image" href="#"></a></li>
<li><a class="fa fa-video-camera" href="#"></a></li>
</menu>
</nav>
<nav class="horizontal">
<input type="checkbox" id="toggle" />
<label for="toggle">
<span class="fa fa-bars"></span>
</label>
<menu class="cover">
<li><a class="fa fa-home" href="#"></a></li>
<li><a class="fa fa-user" href="#"></a></li>
<li><a class="fa fa-image" href="#"></a></li>
<li><a class="fa fa-video-camera" href="#"></a></li>
</menu>
</nav>
/* Both
**********************************************/
@import url( https://fonts.googleapis.com/css?family=Quantico );
body {
background-color: #333;
font-size : 31px;
}
nav {
overflow : hidden;
}
nav input[type=checkbox] {
display : none;
}
menu {
position : relative;
transition : all .4s cubic-bezier(0.86, 0, 0.07, 1);
}
label {
position: relative;
z-index : 2;
}
li {
list-style-type: none;
}
a , label {
display : block !important;
width : auto !important;
text-decoration : none;
background : linear-gradient(#292929, #242424);
color : #FFF;
padding : 20px 23px;
border : 1px solid black;
}
a:after {
content : '';
position: absolute;
display : none;
font-size : 18px;
font-family: 'Quantico' , georgia;
line-height : 18px;
text-align : center;
color : #fff;
text-shadow : none;
padding : 30px 20px;
text-transform : capitalize;
}
li:hover a:after {
display : block;
}
li:first-child:hover a:after {
content : 'home';
}
li:nth-child(2):hover a:after {
content : 'about';
}
li:nth-child(3):hover a:after {
content : 'gallery';
}
li:nth-child(4):hover a:after {
content : 'video';
}
span {
display : inline-block;
transition : all .4s cubic-bezier(0.86, 0, 0.07, 1);
}
menu a:hover {
box-shadow : inset 0 0 0 4px #B93632;
text-shadow : 0 0 2px #B93632;
background : #1B1B1B;
}
/* Horizontal
**********************************************/
.horizontal label {
float : left;
}
.horizontal menu {
float : left;
left : 0;
}
.horizontal li {
float : left;
}
.horizontal label , .horizontal a {
border-right-color : rgba(255,255,255,0.1);
}
.horizontal li:last-child a {
border-right : 1px solid black ;
}
.horizontal a:after {
top : 0;
left : 100%;
}
#toggle:checked ~ menu {
left : -312px;
transition : left .4s cubic-bezier(0.86, 0, 0.07, 1);
}
#toggle:checked ~ label span {
transform : rotate(-90deg);
transition : all .4s cubic-bezier(0.86, 0, 0.07, 1);
}
/* Vertical
**********************************************/
nav.vertical {
height: 500px;
width : 80px;
float : right;
}
.vertical menu {
top : -332px;
transition : all .4s cubic-bezier(0.86, 0, 0.07, 1);
}
.vertical a , .vertical label {
border-top-color : rgba(255,255,255,0.1);
}
.vertical a:after {
padding : 20px 0;
width : 100%;
left : 0;
top : 100%;
}
.vertical span {
transform : rotate(90deg);
}
#toggle2:checked ~ menu {
top : 0;
transition : top .4s cubic-bezier(0.86, 0, 0.07, 1);
}
#toggle2:checked ~ label span {
transform : rotate(0deg);
transition : all .4s cubic-bezier(0.86, 0, 0.07, 1);
}
This Pen doesn't use any external JavaScript resources.