<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Side Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1 class="page_title">Side Menu Animation</h1>
<h4 class="what_to_do">(click the menu icon)</h4>
<div class="side_menu">
<div class="burger_box">
<div class="menu-icon-container">
<a href="#" class="menu-icon js-menu_toggle closed">
<span class="menu-icon_box">
<span class="menu-icon_line menu-icon_line--1"></span>
<span class="menu-icon_line menu-icon_line--2"></span>
<span class="menu-icon_line menu-icon_line--3"></span>
</span>
</a>
</div>
</div>
<div class="px-5">
<h2 class="menu_title">Menu Title</h2>
<ul class="list_load">
<li class="list_item"><a href="#">List Item 01</a></li>
<li class="list_item"><a href="#">List Item 02</a></li>
<li class="list_item"><a href="#">List Item 03</a></li>
<li class="list_item"><a href="#">List Item 04</a></li>
<li class="list_item"><a href="#">List Item 05</a></li>
<li class="list_item"><a href="#">List Item 06</a></li>
<li class="list_item"><a href="#">List Item 07</a></li>
<li class="list_item"><a href="#">List Item 08</a></li>
</ul>
<div class="spacer_box"><p>This is a spacer box.</p></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Raleway:300,700);
body {
background: #048;
background: -webkit-linear-gradient(left top, #027, #48a);
background: -moz-linear-gradient(bottom right, #027, #48a);
background: linear-gradient(to bottom right, #027, #48a);
color: #fff;
font-family: 'Raleway', Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 300;
line-height: 140%;
margin: 0;
min-height: 100vh;
padding: 0;
width: 100%;
}
h1.page_title{color:#fff;}
h4.what_to_do{color:#fff;}
h2.menu_title{color:#fff;}
.page_title,
.what_to_do {
font-weight: 300;
line-height: 120%;
text-align: center;
text-shadow: 0 1px 5px rgba(0,0,0,.8);
text-transform: uppercase;
}
/* PEN STYLES ========== */
a,
.side_menu {
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
/* MENU CONTAINER ----- */
.side_menu {
background: rgba(0,20,60,.9);
height: 100vh;
left: -250px;
position: absolute;
top: 0;
width: 250px;
}
.side_menu .container {
padding: 0 1em;
}
/* HAMBURGER STYLES ----- */
.burger_box {
display: block;
float: right;
margin-right: -45px;
}
.burger_box a.menu-icon {
display: inline-block;
float: none;
height: 43px;
padding: 10px;
opacity: .5;
width: 45px;
z-index: 100;
}
.burger_box a.menu-icon:hover,
.burger_box a.menu-icon.opened {
opacity: 1;
}
.burger_box a.menu-icon.opened {
background: rgba(0,20,60,.9);
}
.burger_box .menu-icon_box {
display: inline-block;
height: 25px;
position: relative;
text-align: left;
width: 25px;
}
.burger_box .menu-icon_line {
background: #fff;
border-radius: 2px;
display: inline-block;
height: 3px;
position: absolute;
width: 100%;
}
.burger_box .menu-icon_line--1 {
top: 2px;
}
.burger_box .menu-icon_line--2 {
top: 10px;
}
.burger_box .menu-icon_line--3 {
top: 18px;
}
.burger_box .menu-icon_line--1 {
transition: top 200ms 250ms, transform 200ms;
-webkit-transition: top 200ms 250ms, -webkit-transform 200ms;
}
.burger_box .menu-icon_line--2 {
transition: opacity 0ms 300ms;
-webkit-transition: opacity 0ms 300ms;
}
.burger_box .menu-icon_line--3 {
transition: top 100ms 300ms, transform 200ms;
-webkit-transition: top 100ms 300ms, -webkit-transform 200ms;
}
.burger_box .menu-icon.opened .menu-icon_box {
transform: scale3d(0.9, 0.9, 0.9);
-webkit-transform: scale3d(0.9, 0.9, 0.9);
}
.burger_box .menu-icon.opened .menu-icon_line {
top: 10px;
}
.burger_box .menu-icon.opened .menu-icon_line--1 {
transform: rotate3d(0, 0, 1, 45deg);
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transition: top 100ms, transform 200ms 250ms;
-webkit-transition: top 100ms, -webkit-transform 200ms 250ms;
}
.burger_box .menu-icon.opened .menu-icon_line--2 {
opacity: 0;
transition: opacity 200ms;
-webkit-transition: opacity 200ms;
}
.burger_box .menu-icon.opened .menu-icon_line--3 {
transform: rotate3d(0, 0, 1, -45deg);
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transition: top 200ms, transform 200ms 250ms;
-webkit-transition: top 200ms, -webkit-transform 200ms 250ms;
}
/* STAGGER LIST ----- */
.list_load {
display: none;
list-style: none;
padding: 0;
}
.list_item {
margin-left: -20px;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.list_item a {
color: #fff;
display: block;
padding: 5px 10px;
text-decoration: none;
}
.list_item a:hover {
background: rgba(255,255,255,.2);
}
$(document).ready(function(){
// Requires jQuery
$(document).on('click','.js-menu_toggle.closed',function(e){
e.preventDefault(); $('.list_load, .list_item').stop();
$(this).removeClass('closed').addClass('opened');
$('.side_menu').css({ 'left':'0px' });
var count = $('.list_item').length;
$('.list_load').slideDown( (count*.6)*100 );
$('.list_item').each(function(i){
var thisLI = $(this);
timeOut = 100*i;
setTimeout(function(){
thisLI.css({
'opacity':'1',
'margin-left':'0'
});
},100*i);
});
});
$(document).on('click','.js-menu_toggle.opened',function(e){
e.preventDefault(); $('.list_load, .list_item').stop();
$(this).removeClass('opened').addClass('closed');
$('.side_menu').css({ 'left':'-250px' });
var count = $('.list_item').length;
$('.list_item').css({
'opacity':'0',
'margin-left':'-20px'
});
$('.list_load').slideUp(300);
});
});
