Slider Menu
HTML
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<div class="menu">
<div class="menu-btn close">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="menu-btn open">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
<li><a href="#">Item Four</a></li>
<li><a href="#">Item Five</a></li>
<li><a href="#">Item Six</a></li>
<li><a href="#">Item Seven</a></li>
<li><a href="#">Item Eight</a></li>
</ul>
</div>
CSS
.fa-th{
color: #fff;
}
.menu{
display: block;
width: 280px;
height: 100%;
position: fixed;
background-color: #000;
left:-280px;
z-index:999;
}
.menu ul{
height:100%;
overflow:hidden;
overflow-y:auto;
overflow-x:hidden;
margin:0;
padding:0;
}
.menu ul li{
display:block;
position: relative;
float: left;
width:100%;
}
.menu ul li a{
display:block;
position:relative;
padding:20px 0 20px 0;
float:left;
width:100%;
color:#fff;
text-align:center;
text-decoration: none;
transition: all 0.5s;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-weight:300;
letter-spacing: 0.3em;
font-size:12px;
line-height:1em;
}
.menu ul li a:hover{
background-color:#333;
}
.menu-btn{
cursor:pointer;
position:absolute;
right:-43px;
width:30px;
padding:5px 5px 8px 8px;
background-color:transparent;
transition: all 0.5s;
border-radius: 0 0 6px 0;
}
.menu-btn:hover{
background-color:#000;
}
.menu-btn div{
height:5px;
width:5px;
border-radius:50%;
background-color: #000;
margin:2px;
float:left;
transition: all 0.5s;
-webkit-opacity:0.25;
opacity:0.1;
}
.menu-btn:hover div{
background-color: #fff;
-webkit-opacity:1;
opacity:1;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 0;
}
::-webkit-scrollbar-thumb {
margin: 10px 0 10px 0;
border-radius: 5px;
background-color:#666;
}
JAVASCRIPT
$( document ).ready(function() {
$( ".open" ).click(function() {
$( ".menu" ).animate({ "left": "0px" }, 500);
$( ".open" ).hide(0);
$( ".close" ).show(0);
});
$( ".close" ).click(function() {
$( ".menu" ).animate({ "left": "-280px" }, 500);
$( ".close" ).hide(0);
$( ".open" ).show(0);
});
});
