Bootstrap Snippet sidebar menu with hamburger using jquery and css 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 ---------->
<header id="header" class="d-flex align-items-center">
    <div class="container d-flex align-items-center justify-content-between">
        <div class="brand">
            <a href="#"><img src="images/bootstrapfriendly_logo.png" alt="logo" title="logo" class="img-fluid"></a>
        </div>
        <div class="menu-bars button_container" id="toggle">
            <span class="top"></span>
            <span class="middle"></span>
            <span class="bottom"></span>
        </div>
        <div id="slide-menu">
            <div class="slide-menu-close">
                <span class="top"></span>
                <span class="bottom"></span>
            </div>
            <nav class="primary-menu">
                <ul id="menu-header-menu">
                    <li><a href="#">Home</a></li>
                    <!-- <li><a href="#">About Us</a></li> -->
                    <li class="dropdownmenu">
                        <a href="#">Categories<svg class="icon icon-angle-down" aria-hidden="true" role="img">
                                <use href="#icon-angle-down" xlink:href="#icon-angle-down"></use>
                            </svg></a>
                        <ul class="sub-menu">
                            <li><a href="#">sub cat 01</a></li>
                            <li><a href="#">sub cat 02</a></li>
                            <li><a href="#">sub cat 03</a></li>
                            <li><a href="#">sub cat 04</a></li>
                            <li><a href="#">sub cat 05</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
header {
    padding: 30px 0;
    background-color: #fff;
}
#header {
    background: #fff;
    transition: all 0.5s;
    z-index: 997;
    height: 86px;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}
#header.fixed-top {
    height: 70px;
}
/*css start menu */
.primary-menu {
    position: relative;
    right: 0;
    top: 5%;
    left: 0px;
}
.primary-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.primary-menu ul li {
    float: left;
    position: relative;
}
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
$(document).ready(function () {
    $(".menu-bars").click(function () {
        $("#slide-menu").addClass("active");
    });
    $(".slide-menu-close").click(function () {
        $("#slide-menu").removeClass("active");
    });
    $(".skip-form-close").click(function () {
        $(".skip-header-dd").removeClass("active");
    });
    var togle = false;
    $(".dropdownmenu").click(function () {
        if (togle == false) {
            $(this).addClass("active");
            togle = true;
        } else {
            $(this).removeClass("active");
            togle = false;
        }
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"sidebar menu with hamburger using jquery and css"
Bootstrap 4.1.1 Snippet by ranjit1602

Related: See More

Questions / Comments:

"sidebar menu with hamburger using jquery and css" Bootstrap 4.1.1 Snippet by ranjit1602

Related: See More

Questions / Comments:

"sidebar menu with hamburger using jquery and css"
Bootstrap 4.1.1 Snippet by ranjit1602