WordPress.org

Plugin Directory

Big Voodoo Mega Menu & Related Links Menu

Enhancements to the wp-admin Menu interface that allow for faster, more robust, and easier to edit menus. Also includes a Related Links Menu.

  1. Install the plugin in WordPress & activate it.
  2. register a menu location in your theme.
  3. Setup the menu hierarchy under Appearance -> Menu.
  4. Assign the menu from step 3 to the menu location in step 2.
  5. Use one of the shortcodes to display a menu.

Shortcodes

[mega_menu]

Given a theme_location attribute, this shortcode displays a ul-style Mega Menu for the menu assigned to that location, which can be easily styled with CSS in your theme. Options:

  • theme_location: The location in the theme to be used - must be registered with register_nav_menu() in order to be selectable by the user. required
  • before: Output text before the <a> of the link
  • after: Output text after the </a> of the link
  • link_before: Output text before the link text
  • link_after: Output text after the link text
  • ajax: if "true", loads the Mega part of the menu via AJAX.

Example: [mega_menu theme_location="mega" before="<div class='surround'>" after="</div>" link_before="<span>" link_after="</span>"]

[related_links]

Given a theme_location attribute, the shortcode displays a Related Links Menu for the menu assigned to that location, which shows either children, siblings, or top-level pages (chosen in that order). Options:

  • theme_location: The location in the theme to be used - must be registered with register_nav_menu() in order to be selectable by the user. required
  • before: Output text before the <a> of the link
  • after: Output text after the </a> of the link
  • link_before: Output text before the link text
  • link_after: Output text after the link text

Example: [related_links theme_location="mega"]

Filters

walker_nav_menu_start_el

Allows modification of the $output, called when the Walker has created an <li> and started populating it.

Arguments:

  • $output: the output for the menu so far.
  • $item: the current menu item.
  • $depth: the current depth.
  • $args: the arguments passed to Walker_Nav_Mega_Menu.

Example:

function override_nav_menu_start_el($output, $item, $depth, $args) {
    if($args->menu_type == 'mega' && $depth == 0 && $args->ajax !== "true") {
        // add header
        $output .= '<h2>' . get_the_title($item->post_id) . '</h2>';
    }
    return $output;
}
add_filter('walker_nav_menu_start_el', 'override_nav_menu_start_el', 99, 4);

walker_nav_menu_end_el

Allows modification of the $output, called before the Walker adds </li> and after any children are added to the $output.

Arguments:

  • $output: the output for the menu so far.
  • $item: the current menu item.
  • $depth: the current depth.
  • $args: the arguments passed to Walker_Nav_Mega_Menu.

Example:

function override_nav_menu_end_el($output, $item, $depth, $args) {
    if($args->menu_type == 'mega' && $depth == 0 && $args->ajax !== "true") {
        // add footer
        $output .= '<div class="menu_footer">footer for ' . get_the_title($item->post_id) . '</div>';
    }
    return $output;
}
add_filter('walker_nav_menu_end_el', 'override_nav_menu_end_el', 99, 4);

Styling

You can enable the default CSS in the WordPress Admin under Settings > BVI Mega Menu. If you want to customize this look, you can instead use this as a guide in your own stylesheet and have the default turned off.

.bvi-mega-menu-container, .bvi-mega-menu-custom-mobile-menu{background:#CCC;display:table;margin:0;padding:0;position:relative;width:100%}
.bvi-mega-menu-custom-mobile-menu{display:none}
.bvi-mega-menu-container ul, .bvi-mega-menu-container ul li{margin:0;padding:0;list-style:none}
.bvi-mega-menu-container > .menu-item-depth-0, .bvi-mega-menu-custom-mobile-menu > li{display:table-cell;text-align:center;vertical-align:middle}
.bvi-mega-menu-container > .menu-item-depth-0 > a, .bvi-mega-menu-custom-mobile-menu > li > a{color:#000;display:block;font-size:14px;font-family:Arial;padding:15px 12px;-webkit-transition:background .2s ease-in;-moz-transition:background .2s ease-in;-o-transition:background .2s ease-in;transition:background .2s ease-in}
.bvi-mega-menu-container > .menu-item-depth-0:hover > a, .bvi-mega-menu-container > .menu-item-depth-0.active > a, .bvi-mega-menu-custom-mobile-menu > li:hover > a{background:#999;color:#1a1a1a;text-decoration:none}
.bvi-mega-menu-container > .menu-item-depth-0 > .mega-menu{background:#999;display:none;position:absolute;top:47px;left:0;right:0;padding:15px 0;text-align:left;width:100%;z-index:999}
.bvi-mega-menu-container .active .menu-item-page:hover > .sub-menu{display:block !important}
.bvi-mega-menu-container .menu-item-column{float:left;padding:0 3% 25px 1%;width:50%}
.bvi-mega-menu-container .menu-item-column .sub-menu li{font-family:Arial;font-size:12px;padding:6px 0}
.bvi-mega-menu-container .menu-item-column .sub-menu li a{display:block;color:#000;padding:0 5px;position:relative}
.bvi-mega-menu-container .menu-item-column .sub-menu li a:hover, .bvi-mega-menu-container .menu-item-column .sub-menu li.active a{background-color:#999;text-decoration:none}
.bvi-mega-menu-container .menu-item-column .sub-menu li a:hover:after, .bvi-mega-menu-container .menu-item-column .sub-menu li.active a:after{display:block}
.bvi-mega-menu-container .menu-item-column .sub-menu .sub-menu li{text-transform:none;padding-left:22px}

@media handheld, screen and (max-width:767px){
    .mobile-toggle{color:#fff;display:block !important;padding:10px 15px;text-align:right}
    .bvi-mega-menu-container, .bvi-mega-menu-custom-mobile-menu{display:none}
    .bvi-mega-menu-container > .menu-item-depth-0, .bvi-mega-menu-custom-mobile-menu > li{border-bottom:2px solid #333;display:block;text-align:left;width:100%}
    .bvi-mega-menu-container > .menu-item-depth-0 > .mega-menu{display:none !important}
}

Requires: 3.5 or higher
Compatible up to: 4.5.3
Last Updated: 2 months ago
Active Installs: 200+

Ratings

0 out of 5 stars

Support

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,3,3
100,1,1
0,1,0