Multilevel menu

[groovemen]

If you want a multi-level dropdown menu, this is what you have to do:

• create a navbar with a sub-level dropdown menu:

  <nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
  <ul class="navbar-nav">
    <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown link
      </a>
      <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
          <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Submenu action</a></li>
              <li><a class="dropdown-item" href="#">Another submenu action</a></li>
              <li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                  <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Subsubmenu action aa</a></li>
                      <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                  </ul>
              </li>
              <li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
                  <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Subsubmenu action bb</a></li>
                      <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                  </ul>
              </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  </div>
  </nav>

• go in paper-kit.js and insert this block of code:

  $( document ).ready( function () {
  $( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) {
      var $el = $( this );
      var $parent = $( this ).offsetParent( ".dropdown-menu" );
      if ( !$( this ).next().hasClass( 'show' ) ) {
          $( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" );
      }
      var $subMenu = $( this ).next( ".dropdown-menu" );
      $subMenu.toggleClass( 'show' );
  
      $( this ).parent( "li" ).toggleClass( 'show' );
  
      $( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {
          $( '.dropdown-menu .show' ).removeClass( "show" );
      } );
  
       if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
          $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
      }
  
      return false;
  } );
  } );

Best, Stefan

[krishna-7]

@groovemen : this is having conflict with the current code. First the drop down will be like :

Then on clicking the sub menu item name the sub menu drop down moves to the right and it continues like the following.

And the sub menus wont hide. Please make sure it doesn't have any conflict with the current code of paper kit 2 pro.

Cheers!

[groovemen]

Hello @krishna-7,

Please check again and make sure you have all the classes for the navbar from the Paper Kit, also create the dropdown with the sub-level like in the example above because it's working fine, you can see in the photo from the first comment and also in this video. Make sure you insert the JS code too. Greetings!

[krishna-7]

Hi @groovemen,

If you don't mind can you share the entire code of the page that you have shown in the video, because I am still having issues with the multi-level navbar

Are there any changes in the .CSS files?

Also is this the same code that you have shown in the video because you have provided the following snippet : " Navbar" but in the demo in the nav bar it shows Paper Kit 2 Pro

As the js ready function was already in it I just placed the inner code into that in paper-kit.js as well (I tried it in both ways)

Please check this link : test_sub_menu

[krishna-7]

Add the following code to paper-kit.css as well.

.nav-item.dropdown .dropdown-menu li.show .dropdown-menu.show{
  opacity: 1;
  visibility: visible;
}

[groovemen]

Hello again @krishna-7, sorry for the big delay, here are some changes that you have to make:

• in dropdown.scss file please set display: block; only for the first dropdown because it will affect other submenus. Erase this property from .dropdown-menu class.

  .dropdown{
  > .dropdown-menu:first-of-type {
  display: block;
  }
  }

  also set this code to hide those arrows and align the sublevel dropdowns:

  
  .dropdown.show {
  .dropdown-menu.show {
  .dropdown-item.dropdown-toggle + .dropdown-menu {
    &.show {
      left: 166px !important;
  
      &:before,
      &:after {
        display: none;
      }
  
      li.show {
        .dropdown-menu.show {
          left: 237px !important;
        }
      }
    }
  }
  }
  }

Hope this infos helps you!
All the best, Stefan