Bootstrap Snippet Animated hamburger sidebar menu using HTML CSS jQuery

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.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<body>
<div class="container">
    <div class="py-3">
        <div data-trigger="mobile-menu-toggle">
            <span>MENU</span>
            <button class="btn">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </div>
</div>
<aside class="menu">
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</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
aside.menu{
            width: 300px;
            position: fixed;
            top:0;
            left: -200%;
            bottom: 0;
            background: #3c1874;
            -webkit-transition: .5s all;
            -moz-transition: .5s all;
            -ms-transition: .5s all;
            -o-transition: .5s all;
            transition: .5s all;
            z-index: 99;
        }
        .toggled aside.menu{
            left:0;
        }
        [data-trigger=mobile-menu-toggle] {
            /*display: none;*/
            display: flex;
            margin-bottom: 1rem;
            border-radius: 0.25rem;
            background: #3c1874;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            position: sticky;
            top: 0;
            z-index: 9;
        }
        [data-trigger=mobile-menu-toggle] > span {
            font-weight: bold;
            font-size: 24px;
            color:#fff;
        }
        /*@media only screen and (max-width: 991px) {
            [data-trigger=mobile-menu-toggle] {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
$(function () {
        $(document).on('click', '[data-trigger="mobile-menu-toggle"] button', function () {
            $('body').toggleClass('toggled');
            $(this).toggleClass('toggled');
        })
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Animated hamburger sidebar menu"
Bootstrap 4.1.1 Snippet by MMLTech

Related: See More

Questions / Comments:

"Animated hamburger sidebar menu" Bootstrap 4.1.1 Snippet by MMLTech

Related: See More

Questions / Comments:

"Animated hamburger sidebar menu"
Bootstrap 4.1.1 Snippet by MMLTech