├── mobile.png
├── desktop.png
├── README.md
├── js
    └── bootstrap-4-hover-navbar.js
├── css
    └── bootstrap-4-hover-navbar.css
└── index.html


/mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bootstrapthemesco/bootstrap-4-multi-dropdown-hover-navbar/HEAD/mobile.png


--------------------------------------------------------------------------------
/desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bootstrapthemesco/bootstrap-4-multi-dropdown-hover-navbar/HEAD/desktop.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Bootstrap 4 Responsive hover Navbar with Multiple Dropdowns
 2 | ==========================
 3 | 
 4 | 
 5 | Tested on Bootstrap 4.0.0-alpha.6 and jQuery v3.1.1. Check this [Demo](https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-hover-navbar)
 6 | 
 7 | 
 8 | ## In Desktop
 9 | ![desktop](https://raw.githubusercontent.com/bootstrapthemesco/bootstrap-4-multi-dropdown-hover-navbar/master/desktop.png)
10 | 
11 | 
12 | ## Mobile device
13 | ![mobile](https://raw.githubusercontent.com/bootstrapthemesco/bootstrap-4-multi-dropdown-hover-navbar/master/mobile.png)
14 | 
15 | 
16 | ==========================
17 | 
18 | <h4>Usage</h4>
19 | 
20 | 1. Add css header for caret right icon ```<link href="css/bootstrap-4-hover-navbar.css" rel="stylesheet">```
21 | 2. Add js for navbar events after include jquery and bootstrap js files ```<script src="js/bootstrap-4-hover-navbar.js"></script>```
22 | 
23 | 
24 | 
25 | Credits: fontenele


--------------------------------------------------------------------------------
/js/bootstrap-4-hover-navbar.js:
--------------------------------------------------------------------------------
 1 | 
 2 | /*!
 3 |  * Bootstrap 4 multi dropdown navbar ( https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-navbar/ )
 4 |  * Copyright 2017.
 5 |  * Licensed under the GPL license
 6 |  */
 7 | 
 8 | 
 9 | $( document ).ready( function () {
10 |     $( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) {
11 |         var $el = $( this );
12 |         var $parent = $( this ).offsetParent( ".dropdown-menu" );
13 |         if ( !$( this ).next().hasClass( 'show' ) ) {
14 |             $( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" );
15 |         }
16 |         var $subMenu = $( this ).next( ".dropdown-menu" );
17 |         $subMenu.toggleClass( 'show' );
18 |         
19 |         $( this ).parent( "li" ).toggleClass( 'show' );
20 | 
21 |         $( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {
22 |             $( '.dropdown-menu .show' ).removeClass( "show" );
23 |         } );
24 |         
25 |          if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
26 |             $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
27 |         }
28 | 
29 |         return false;
30 |     } );
31 | } );


--------------------------------------------------------------------------------
/css/bootstrap-4-hover-navbar.css:
--------------------------------------------------------------------------------
 1 | 
 2 | /*=-====Bootstrapthemes.co btco-hover-menu=====*/
 3 | 
 4 | .navbar-light .navbar-nav .nav-link {
 5 |     color: rgb(64, 64, 64);
 6 | }
 7 | .btco-hover-menu a ,  .navbar > li > a {
 8 |     text-transform: capitalize;
 9 |     padding: 10px 15px;
10 | }
11 | .btco-hover-menu .active a,
12 | .btco-hover-menu .active a:focus,
13 | .btco-hover-menu .active a:hover,
14 | .btco-hover-menu li a:hover,
15 | .btco-hover-menu li a:focus ,
16 | .navbar>.show>a,  .navbar>.show>a:focus,  .navbar>.show>a:hover{
17 |     color: #000;
18 |     background: transparent;
19 |     outline: 0;
20 | }
21 | 
22 | 
23 | 
24 | /*submenu style start from here*/
25 | 
26 | 
27 | .dropdown-menu {
28 |     padding: 0px 0; 
29 |     margin: 0 0 0; 
30 |     border: 0px solid transition !important;
31 |     border: 0px solid rgba(0,0,0,.15);	
32 |     border-radius: 0px;
33 |     -webkit-box-shadow: none !important;
34 |     box-shadow: none !important;
35 | 
36 | }
37 | 
38 | /*first level*/
39 | .btco-hover-menu .collapse ul > li:hover > a{background: #f5f5f5;}
40 | .btco-hover-menu .collapse ul ul > li:hover > a, .navbar .show .dropdown-menu > li > a:focus, .navbar .show .dropdown-menu > li > a:hover{background: #fff;}
41 | /*second level*/
42 | .btco-hover-menu .collapse ul ul ul > li:hover > a{background: #fff;}
43 | 
44 | /*third level*/
45 | .btco-hover-menu .collapse ul ul, .btco-hover-menu .collapse ul ul.dropdown-menu{background:#f5f5f5;}
46 | .btco-hover-menu .collapse ul ul ul, .btco-hover-menu .collapse ul ul ul.dropdown-menu{background:#f5f5f5}
47 | .btco-hover-menu .collapse ul ul ul ul, .btco-hover-menu .collapse ul ul ul ul.dropdown-menu{background:#f5f5f5}
48 | 
49 | /*Drop-down menu work on hover*/
50 | .btco-hover-menu{background: none;margin: 0;padding: 0;min-height:20px}
51 | 
52 | @media only screen and (max-width: 991px) {
53 |     .btco-hover-menu .show > .dropdown-toggle::after{
54 |         transform: rotate(-90deg);
55 |     }
56 | }
57 | @media only screen and (min-width: 991px) {
58 | 
59 |     .btco-hover-menu .collapse ul li{position:relative;}
60 |     .btco-hover-menu .collapse ul li:hover> ul{display:block}
61 |     .btco-hover-menu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
62 |     /*******/
63 |     .btco-hover-menu .collapse ul ul li{position:relative}
64 |     .btco-hover-menu .collapse ul ul li:hover> ul{display:block}
65 |     .btco-hover-menu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
66 |     /*******/
67 |     .btco-hover-menu .collapse ul ul ul li{position:relative}
68 |     .btco-hover-menu .collapse ul ul ul li:hover ul{display:block}
69 |     .btco-hover-menu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}
70 | 
71 | }
72 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |         <title>Bootstrap 4 Navbar with hover multi dropdown</title>
  8 | 
  9 |         <!-- Bootstrap -->
 10 |         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
 11 | 
 12 |         <link href="css/bootstrap-4-hover-navbar.css" rel="stylesheet">
 13 | 
 14 | 
 15 |         <!--Demo purpose css-->
 16 |         <style>
 17 |             body {
 18 |                 padding-top: 50px;
 19 |             }
 20 |             .navbar {
 21 |                 margin:  40px 0;
 22 |             }
 23 |             .jumbotron{background-color: #1f1f1f;color: #fff;}
 24 | 
 25 |         </style>
 26 |     </head>
 27 |     <body>
 28 | 
 29 | 
 30 | 
 31 | 
 32 |         <div class="container">
 33 | 
 34 |             <!-- Static navbar -->
 35 |             <nav class="navbar navbar-expand-md navbar-light bg-light btco-hover-menu">
 36 |                 <a class="navbar-brand" href="#">Navbar</a>
 37 |                 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
 38 |                     <span class="navbar-toggler-icon"></span>
 39 |                 </button>
 40 |                 <div class="collapse navbar-collapse" id="navbarNavDropdown">
 41 |                     <ul class="navbar-nav">
 42 |                         <li class="nav-item active">
 43 |                             <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
 44 |                         </li>
 45 |                         <li class="nav-item">
 46 |                             <a class="nav-link" href="#">Features</a>
 47 |                         </li>
 48 |                         <li class="nav-item">
 49 |                             <a class="nav-link" href="#">Pricing</a>
 50 |                         </li>
 51 |                         <li class="nav-item dropdown">
 52 |                             <a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 53 |                                 Dropdown link
 54 |                             </a>
 55 |                             <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 56 |                                 <li><a class="dropdown-item" href="#">Action</a></li>
 57 |                                 <li><a class="dropdown-item" href="#">Another action</a></li>
 58 |                                 <li><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
 59 |                                     <ul class="dropdown-menu">
 60 |                                         <li><a class="dropdown-item" href="#">Submenu action</a></li>
 61 |                                         <li><a class="dropdown-item" href="#">Another submenu action</a></li>
 62 | 
 63 | 
 64 |                                         <li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
 65 |                                             <ul class="dropdown-menu">
 66 |                                                 <li><a class="dropdown-item" href="#">Subsubmenu action aa</a></li>
 67 |                                                 <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
 68 |                                             </ul>
 69 |                                         </li>
 70 |                                         <li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
 71 |                                             <ul class="dropdown-menu">
 72 |                                                 <li><a class="dropdown-item" href="#">Subsubmenu action bb</a></li>
 73 |                                                 <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
 74 |                                             </ul>
 75 |                                         </li>
 76 |                                     </ul>
 77 |                                 </li>
 78 |                                 <li><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
 79 |                                     <ul class="dropdown-menu">
 80 |                                         <li><a class="dropdown-item" href="#">Submenu action 2</a></li>
 81 |                                         <li><a class="dropdown-item" href="#">Another submenu action 2</a></li>
 82 | 
 83 | 
 84 |                                         <li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
 85 |                                             <ul class="dropdown-menu">
 86 |                                                 <li><a class="dropdown-item" href="#">Subsubmenu action 1 3</a></li>
 87 |                                                 <li><a class="dropdown-item" href="#">Another subsubmenu action 2 3</a></li>
 88 |                                             </ul>
 89 |                                         </li>
 90 |                                         <li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu 3</a>
 91 |                                             <ul class="dropdown-menu">
 92 |                                                 <li><a class="dropdown-item" href="#">Subsubmenu action 3 </a></li>
 93 |                                                 <li><a class="dropdown-item" href="#">Another subsubmenu action 3</a></li>
 94 |                                             </ul>
 95 |                                         </li>
 96 |                                     </ul>
 97 |                                 </li>
 98 |                             </ul>
 99 |                         </li>
100 |                     </ul>
101 |                 </div>
102 |             </nav>
103 | 
104 |             <!-- Main component for a primary marketing message or call to action -->
105 |             <div class="jumbotron">
106 |                 <h1>Bootstrap 4 multi dropdown navbar</h1>
107 |                 <p>This example of bootstrap 4 navigation with multi dropdown menu.</p>
108 |                 <p>
109 |                     <a class="btn btn-lg btn-danger" href="https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-navbar/" target="_blank" role="button">Live Demo</a>
110 |                     <a class="btn btn-lg btn-primary" href="https://github.com/bootstrapthemesco/bootstrap-4-multi-dropdown-navbar"  target="_blank" role="button">Download from Github</a>
111 |                     <a class="btn btn-lg btn-info" href="https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-hover-navbar/"  target="_blank" role="button">hover version</a>
112 |                 </p>
113 |             </div>
114 | 
115 |         </div> <!-- /container -->
116 | 
117 | 
118 | 
119 | 
120 | 
121 | 
122 |         <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
123 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
124 |         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
125 | 
126 |         <script src="js/bootstrap-4-hover-navbar.js"></script>
127 |     </body>
128 | </html>
129 | 


--------------------------------------------------------------------------------