jprieton / wp-bootstrap4-navwalker

A custom WordPress nav walker class to fully implement the Twitter Bootstrap 4.x navigation style in a custom theme using the WordPress built in menu manager
GNU General Public License v3.0
40 stars 56 forks source link

Sub-Menu Support #5

Open killerrin opened 6 years ago

killerrin commented 6 years ago

In case anyone wants it, I have managed to modify this nav-walker to support Multi-level submenus.

The submenus are written to fit to this submenu support css/script module: bootstrapthemesco/bootstrap-4-multi-dropdown-navbar.

The steps to support it are just changing a couple lines within the wp-bootstrap-navwalker.php file.

  1. Add these const's to the class
    class WP_Bootstrap_Navwalker extends Walker_Nav_Menu {
    public const BS_MAX_DEPTH = 2;
    public const BS_DROPDOWN_MANUAL_DEPTH = 1;
  2. Replace start_lvl with this

    public function start_lvl( &$output, $depth = 0, $args = array() ) {
      if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
        $t = '';
        $n = '';
      } else {
        $t = "\t";
        $n = "\n";
      }
    
      if ($depth >= WP_Bootstrap_Navwalker::BS_DROPDOWN_MANUAL_DEPTH) {
        $output         .= $n . str_repeat( $t, $depth ) . '<ul class="dropdown-menu" role="menu">' . $n;
      }
      else {
        $this->dropdown = true;
        $output         .= $n . str_repeat( $t, $depth ) . '<div class="dropdown-menu" role="menu">' . $n;
      }
    }
  3. Replace end_lvl with this

    public function end_lvl( &$output, $depth = 0, $args = array() ) {
      if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
        $t = '';
        $n = '';
      } else {
        $t = "\t";
        $n = "\n";
      }
    
      if ($depth >= WP_Bootstrap_Navwalker::BS_DROPDOWN_MANUAL_DEPTH) {
        $output         .= $n . str_repeat( $t, $depth ) . '</ul>' . $n;
      }
      else {
        $this->dropdown = false;
        $output         .= $n . str_repeat( $t, $depth ) . '</div>' . $n;
      }
    }
nathannerdymind commented 6 years ago

This works great! Thanks

admhpr commented 6 years ago

Superb. Thank you!

lukas78 commented 5 years ago

Hello, thank you, it works! Unfortunately, the "li" elements & classes ( menu-item menu-item-object-post current-menu-item active) are missing. I've tried to solve it, but it doesn't work....can you help? Thank you.