bootstrap multi level responsive menu for mobile phone with slide toggle for mobile

by Syam s

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  </head>

  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="slide-collapse" data-target="#slide-navbar-collapse" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="slide-navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
             ...

CSS

@media only screen and (max-width: 767px) {
  #slide-navbar-collapse {
    position: fixed;
    top: 0;
    left: 15px;
    z-index: 999999;
    width: 280px;
    height: 100%;
    background-color: #f9f9f9;
    overflow: auto;
    bottom: 0;
    max-height: inherit;
  }
  .menu-overlay {
    display: none;
    background-color: #000;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity=50);
    /* IE7 & 8 */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 49;
  }
  .navbar-fixed-top {
    position: initial !important;
  }
  .navbar-nav .open .dropdown-menu {
    background-color: #ffffff;
  }
  ul.nav.navbar-nav li {
    border-bottom: 1px solid #eee;
  }
  .navbar-nav .open .dropdown-menu .dropdown-header,
  .navbar-nav .open .dropdown-menu>li>a {
    padding: 10px 20px 10px 15px;
  }
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

li.dropdown a {
  display: block;
  position: relative;
}

li.dropdown>a:before {
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  right: 6px;
  top: 5px;
  font-size: 15px;
}

li.dropdown-submenu>a:before {
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  right: 6px;
  top: 10px;
  font-size: 15px;
}

ul.dropdown-menu li {
  border-bottom: 1px solid #eee;
}

.dropdown-menu {
  padding: 0px;
  margin: 0px;
  border: none !important;
}

li.dropdown.open {
  border-bottom: 0px !important;
}

li.dropdown-submenu.open {
  border-bottom: 0px !important;
}

li.dropdown-submenu>a {
  font-weight: bold !important;
}

li.dropdown>a {
  font-weight: bold !important;
}

.navbar-default .navbar-nav>li>a {
  font-weight: bold !important;
  padding: 10px 20px 10px 15px;
}

li.dropdown>a:before {
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  right: 6px;
  top: 9px;
  font-size: 15px;
}

@media (min-width: 767px) {
  li.dropdown-submenu>a {
    padding: 10px 20px 10px...

JavaScript

$('[data-toggle="slide-collapse"]').on('click', function() {
  $navMenuCont = $($(this).data('target'));
  $navMenuCont.animate({
    'width': 'toggle'
  }, 350);
  $(".menu-overlay").fadeIn(500);
});

$(".menu-overlay").click(function(event) {
  $(".navbar-toggle").trigger("click");
  $(".menu-overlay").fadeOut(500);
});

// if ($(window).width() >= 767) {
//     $('ul.nav li.dropdown').hover(function() {
//         $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
//     }, function() {
//         $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
//     });

//     $('ul.nav li.dropdown-submenu').hover(function() {
//         $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
//     }, function() {
//         $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
//     });


//     $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
//         event.preventDefault();
//         event.stopPropagation();
//         $(this).parent().siblings().removeClass('open');
//         $(this).parent().toggleClass('open');
//         $('b', this).toggleClass("caret caret-up");
//     });
// }

// $(window).resize(function() {
//     if( $(this).width() >= 767) {
//         $('ul.nav li.dropdown').hover(function() {
//             $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
//         }, function() {
//             $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
//         });
//     }
// });

var windowWidth = $(window).width();
if (windowWidth > 767) {
  // $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
  //     event.preventDefault();
  //     event.stopPropagation();
  //     $(this).parent().siblings().removeClass('open');
  //     $(this).parent().toggleClass('open');
  //     $('b', this).toggleClass("caret caret-up");
  // });

  $('ul.nav li.dropdown').hover(function() {
   ...