Mega menu (bootstrap)

0

Met onderstaande worden mega menu’s mogelijk die zelf in te delen zijn in kolommen die je voordefineerd.

Pas de bootstrap walker aan zodat het menu zal worden getoond als je de class .has-mega-menu toevoegt aan een menu item.

Regel 46
$hasMegaMenu = is_active_sidebar( 'mega-menu-widget-area-' . $item->ID );

Onder de regel  $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );


if ($hasMegaMenu)
	    {
	      $output .= "<ul id=\"mega-menu-widget-area-{$item->ID}\" class=\"mega-menu-wrapper dropdown-menu depth_".$depth."\">";
	        ob_start();
	        dynamic_sidebar( "mega-menu-widget-area-{$item->ID}" );
	        $dynamicSidebar = ob_get_contents();
	        ob_end_clean();
	        $output .=  $dynamicSidebar;
	      $output .= "</ul>";
	    }

Je kan items toevoegen aan het menu en deze worden getoond onder elkaar. Je kan een kolom maken door bijvoorbeeld col-12 col-md-3 toe te voegen aan de item class. Daaronder kan je weer menu items toevoegen.

Wil je widgets toevoegen dan moet je het subitem de klasse .has-widget-menu geven. Er zal dan automatisch een sidebar aangemaakt worden met de naam van het menu item gevolgd door – Mega menu.

Om dit mogelijk te maken moet er in de functions.php het volgende worden toegevoegd:

function wpmm_init() {
    $location = 'header-menu';
    $css_class = 'has-widget-menu';
    $locations = get_nav_menu_locations();
    if ( isset( $locations[ $location ] ) ) {
        $menu = get_term( $locations[ $location ], 'nav_menu' );
        if ( $items = wp_get_nav_menu_items( $menu->name ) ) {
            foreach ( $items as $item ) {
                if ( in_array( $css_class, $item->classes ) ) {
                    register_sidebar( array(
                        'id'   => 'mega-menu-widget-area-' . $item->ID,
                        'name' => $item->title . ' - Mega Menu',
                    ) );
                }
            }
        }
    }
}
add_action( 'widgets_init', 'wpmm_init' );

Vervolgens moet het allemaal de juiste style krijgen. De basis hiervoor staat hieronder. (LESS) In het menu item .navbar-nav > li

&.has-mega-menu {
      position: static;
      margin: 0;

      &:hover {
        .dropdown-menu {
          -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
          box-shadow: 0 6px 12px rgba(0,0,0,0.175);
          background: #fff;
          width: 100%;
          padding: 0px;
          display: -ms-flexbox!important;
          display: flex!important;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;

          & > li {
            display: inline-block;
            padding: 30px 15px 15px 15px;

            & > a {
              font-size: 20px;
              font-weight: bold;
              text-transform: none;
              margin-bottom: 10px;
              margin-bottom: 15px;
              display: inline-block;

              &:before {
                display: none;
              }
              &:after {
                content: '';
                position: absolute;
                display: block;
                margin: 0 auto;
                left: 0;
                right: 0;
                bottom: -5px;
                width: 35px;
                height: 2px;
                background: #d6c1c2;
                margin-top: 5px;
                border: none;
              }

            }

            & > ul {
              position: relative;
              top: 0px;
              -webkit-box-shadow: none;
              box-shadow: none;

              & > li {
                display: block!important;
                text-transform: none;
                width: 100%;
                padding: 2.5px 0px;

                a {
                  font-size: 14px;
                  font-weight: normal;
                  display: block;
                  margin-bottom: 0px;

                  &:before, &:after {
                    display: none;
                  }

                  &:hover {
                    color: @color_links_menu_hover;
                  }
                }

              }
            }
          }
        }
      }
    }
Geef een reactie 0