"Side Menu (Responsive)"
Bootstrap 4.0.0 Snippet by Siddharth Panchal

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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);
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Black Dashboard
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/

Questions / Comments: