Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multilevel menu support #391

Closed
RichForever opened this issue Jul 19, 2018 · 6 comments

Comments

Projects
None yet
6 participants
@RichForever
Copy link

commented Jul 19, 2018

Is it any way to create multilevel menu support? I want to create menu like this

  • Menu item
    • sub item
      • sub sub item
@MWDelaney

This comment has been minimized.

Copy link

commented Aug 2, 2018

Bootstrap itself doesn’t support multi-level dropdowns so adding them here would seem to be out of scope of this tool.

@PaolaMaglia

This comment has been minimized.

Copy link

commented Aug 16, 2018

Goodmorning,
I've the same problem of RichForever.
I can't tell to my client that Bootstrap doesn't support multilevel dropdown, 'cause he's not a developer and he can't understand it.
Is there a way to get around the problem?
Thanks

@pattonwebz

This comment has been minimized.

Copy link
Member

commented Aug 16, 2018

@PaolaMaglia there are some other issues in this repo that have various ideas and methods for enabling additional levels. I have not tried any of them myself but I have seen comments from others saying thanks for sometimes so I expect there are enough notes (sadly they are spread through lots of different issue threads) to make it happen.

@pattonwebz

This comment has been minimized.

Copy link
Member

commented Aug 16, 2018

@RichForever there is not a way to make it happen using this walker and bootstrap - without modifications. Have a search through other older issues though as I know there are notes in there that have details about how to make it happen.

@schoenj

This comment has been minimized.

Copy link

commented Oct 28, 2018

Good evening,
as @pattonwebz already mentioned, that this is not possible without any modifications.
But for those, who need a fast fix, i fixed it for me with the Github project(bootstrapthemesco/bootstrap-4-multi-dropdown-navbar) and six additional lines of code.

In the start_el mehtod, i copied the first if statement and modified it like that
}elseif ( isset( $args->has_children ) && $args->has_children && 0 < $depth && $args->depth > 1 ) { $atts['href'] = '#'; $atts['data-toggle'] = 'dropdown'; $atts['aria-haspopup'] = 'true'; $atts['aria-expanded'] = 'false'; $atts['class'] = 'dropdown-toggle dropdown-item'; $atts['id'] = 'menu-item-dropdown-' . $item->ID;

I'm sure you could write that more beautiful.

@ikender

This comment has been minimized.

Copy link

commented Dec 1, 2018

Wilt a little css and js you can do this (change depth in your wp_nav_menu() call to greater than 2 (I try to limit mine to 3, but you can go more)

for your css add

/* multilevel navigation */
.dropdown-submenu { position: relative; }
.dropdown-submenu .dropdown-menu { top: 0; left: 95%; margin-top: -1px; }

for your javascript add

// dropdown multilevel
$('.dropdown-menu > li > .dropdown-menu').parent().addClass('dropdown-submenu').find(' > .dropdown-item').attr('href', 'javascript:;').addClass('dropdown-toggle');
  $('.dropdown-submenu > a').on("click", function(e) {
    var dropdown = $(this).parent().find(' > .show');
    $('.dropdown-submenu .dropdown-menu').not(dropdown).removeClass('show');
    $(this).next('.dropdown-menu').toggleClass('show');
    e.stopPropagation();
  });

  // hide all open menus if the parent closes
  $('.dropdown').on("hidden.bs.dropdown", function() {
    $('.dropdown-menu.show').removeClass('show');
  });

@pattonwebz pattonwebz closed this Jan 26, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.