Bootstrap Snippet Bootstrap 4 Mega Menu 3 Level using HTML CSS Javascript

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 ---------->
<div class="menu-area">
    <div class="container">
        <div class="row">
            <nav class="navbar navbar-light navbar-expand-lg mainmenu">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="fa fa-bars" aria-hidden="true"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="active">
                            <a href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown
                                <i class="fa fa-angle-down" aria-hidden="true"></i>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="dropdown">
                                    <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Dropdown2
                                        <i class="fa fa-angle-down only-mobile" aria-hidden="true"></i>
                                        <i class="fa fa-angle-right only-desktop" aria-hidden="true"></i>
                                    </a>
                                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</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
.menu-area {
    background-color: #131d33;
}
.dropdown-menu {
    padding: 0;
    margin: 0;
    border: 0 solid transition!important;
    border: 0 solid rgba(0, 0, 0, .15);
    border-radius: 0;
    -webkit-box-shadow: none!important;
    box-shadow: none!important
}
/*.mainmenu a,*/
.navbar-default .navbar-nav > li > a,
.mainmenu ul li a,
.navbar-expand-lg .navbar-nav .nav-link {
    color: #fff;
    font-size: 16px;
    text-transform: capitalize;
    padding: 16px 15px;
    font-family: 'Roboto', sans-serif;
    display: block !important;
}
.mainmenu .active a,
.mainmenu .active a:focus,
.mainmenu .active a:hover,
.mainmenu li a:hover,
.mainmenu li a:focus,
.navbar-default .navbar-nav>.show>a,
.navbar-default .navbar-nav>.show>a:focus,
.navbar-default .navbar-nav>.show>a:hover {
    color: #fff;
    background-color: #0f3c9e;
    outline: 0;
}
.navbar-light .navbar-toggler{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function($){
    $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
        if (!$(this).next().hasClass('show')) {
            $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
        }
        var $subMenu = $(this).next(".dropdown-menu");
        $subMenu.toggleClass('show');
        $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
           $('.dropdown-submenu .show').removeClass("show");
        });
        return false;
    });
})(jQuery)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap 4 Mega Menu 3 Level"
Bootstrap 4.1.1 Snippet by mani88100ni

Related: See More

Questions / Comments:

"Bootstrap 4 Mega Menu 3 Level" Bootstrap 4.1.1 Snippet by mani88100ni

Related: See More

Questions / Comments:

"Bootstrap 4 Mega Menu 3 Level"
Bootstrap 4.1.1 Snippet by mani88100ni