Bootstrap Snippet Hamburger Menu to X Snippet using HTML CSS Bootstrap 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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="navWrapper">
    <div class="container">
        <nav class="navbar bg-dark navbar-dark">
            <a class="navbar-brand">Bootstrap Nav</a>
            <div class="navbar-toggler navbar-toggle" data-toggle="collapse" data-target="#toogle-navbar">
                <i></i><i></i><i></i>
            </div>
            <div class="collapse navbar-collapse" id="toogle-navbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Item 1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Item 1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Item 1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Item 1</a>
                    </li>
                </ul>
            </div>
        </nav>
        
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-center mg-t-20">Simple Hamburger Menu to X Mark Animation</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget feugiat augue. In in viverra erat. Nulla pharetra elit ut malesuada commodo. Cras scelerisque tempor tortor nec tristique. In non vulputate risus. Curabitur faucibus ornare purus. Aliquam urna risus, fringilla nec auctor sit amet, congue a elit. In hac habitasse platea dictumst. Proin semper eleifend eros vel sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut venenatis nibh metus, at molestie ipsum luctus eget. Integer vel ultricies ligula. Nam luctus lacus nibh, et bibendum dui euismod et.
                </p>
                <p>
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
:root {
    --bg: white;
    --nv-bg: #2FB0B5;
}
* { margin: 0; padding: 0; }
.bg-dark { background-color: var(--nv-bg) !important; }
.navWrapper .navbar-brand { color: var(--bg) !important; }
.mg-t-20 { margin-top: 20px; }
/*Hamburger Menu to X css*/
.navbar-toggle {
    width: 30px;
    height: 25px;
    cursor: pointer;
}
.navbar-toggle i {
    background: var(--bg);
    border-radius: 2px;
    width: 100%;
    height: 4px;
    content: "";
    display: block;
}
.navbar-toggle i:nth-child(1) {
    -webkit-animation: outT 0.8s backwards;
    animation: outT 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}
.navbar-toggle i:nth-child(2) {
    margin: 5px 0;
    -webkit-animation: outM 0.8s backwards;
    animation: outM 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}
.navbar-toggle i:nth-child(3) {
    -webkit-animation: outBtm 0.8s backwards;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
$(function() {
    $('.navbar-toggle').click(function(){
      $(this).toggleClass('active');
    }); 
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Hamburger Menu to X Snippet"
Bootstrap 4.1.1 Snippet by joyparker

Related: See More

Questions / Comments:

"Hamburger Menu to X Snippet" Bootstrap 4.1.1 Snippet by joyparker

Related: See More

Questions / Comments:

"Hamburger Menu to X Snippet"
Bootstrap 4.1.1 Snippet by joyparker