Bootstrap Snippet Multi Level Mega Menu using HTML CSS Bootstrap 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="container">
  <div class="nav">
    <nav id="myNavbar" class="navbar navbar-default" role="navigation">
      <ul class="menu menu-bar">
        <li class="nav-item dropdown position-static menu-link menu-bar-link">
          <a href="javascript:void(0);" aria-haspopup="true" data-toggle="dropdown" class="dropdown-toggle">1. Multilevel mega menu <b class="caret"></b></a>
          <div class="dropdown-menu mt-0 w-100">  
            <h3>Products</h3>
            <div class="row">
            <div class="megadpdwninfo col-md-5">
              <p>dfdsgdsgfdgfdhsodg<br/>jfosdjfods<br/>hksdhfdshfdshfsfh<br/>dfhsadofoshoshf<br/>lfhdsoihodshf<br/></p>
            </div>  
            <div class="megadpdwnulli">
            <ul class="mega-menu mega-menu--multiLevel">
              <li class="frstlevel dropdown position-static">
                <a href="javascript:void(0);" class="menu-link mega-menu-link dropdown-toggle" aria-haspopup="true" data-toggle="dropdown">1.1 Flyout link</a>
                <ul class="frstleveldp dropdown-menu menu menu-list">
                  <li>
                    <a href="/page" class="menu-link menu-list-link">1.1.1 Page link</a>
                  </li>
                  <li class="seclevel dropdown position-static">
                    <a href="javascript:void(0);" class="menu-link menu-list-link" aria-haspopup="true">1.1.2 Flyout link</a>
                    <ul class="secleveldp dropdown-menu menu menu-list">
                      <li>
                        <a href="/page" class="menu-link menu-list-link">1.1.2.1 Page link</a>
                      </li>
                      <li>
                        <a href="/page" class="menu-link menu-list-link">1.1.2.2 Page link</a>
                      </li>
                    </ul>
                  </li>
                  <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
.navbar {
    padding: 0;
}
.dropdown-menu {
    min-width: 10rem;
    padding: 100px 0;
    margin: 0;
    background-color: #aeaeae;
    background-clip: padding-box;
    border: 0px solid rgba(0,0,0,.15);
    border-radius: 0;
}
ul.menu.menu-list {
    position: absolute;
    float: left;
    left: 100%;
    top: 0;
}
.megadpdwnulli {
    position: relative;
}
.frstleveldp, .secleveldp {
    position: absolute;
    display: none;
    left: 100%;
    top: 0%;
    float: left;
    padding: 0;
}
.frstlevel.dropdown, .seclevel.dropdown-menu {
  display: block;
}
.frstlevel.dropdown:hover .frstleveldp.dropdown-menu, .seclevel.dropdown:hover .secleveldp.dropdown-menu {
  display: block;
} 
.mega-menu--multiLevel li:hover > [aria-haspopup="true"] ~ ul {
    display: block;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
$(document).on('click', '.dropdown-menu', function (e) {
      e.stopPropagation();
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Multi Level Mega Menu"
Bootstrap 4.1.1 Snippet by ugnandish

Related: See More

Questions / Comments:

"Multi Level Mega Menu" Bootstrap 4.1.1 Snippet by ugnandish

Related: See More

Questions / Comments:

"Multi Level Mega Menu"
Bootstrap 4.1.1 Snippet by ugnandish