Adding a ‘mega menu’ to my site without a plugin

by

Can anyone suggest the best way to go about adding a ‘mega menu’ to my wordpress navigation without using a plugin?

The content in the mega menu itself does not need to be editable via the CMS HOWEVER does need to be active when the user hovers over a certain li in the main navigation.

I’ve looked on Google but everything is geared towards the plugin route, which I’d liek to avoid.

Thanks

2 Answers
2

I’ll just point out how you can insert the HTML of your mega dropdown menu, then it’s up to you to style and animate it.

Dig around in wp-includes/nav-menu-template.php to find different useful filters for modifying navigation menus created in the admin area. I chose for the walker_nav_menu_start_el filter which gets applied to each menu item separately. After the anchor tag has been created you have the possibility to insert more HTML before the closing list item.

add_filter( 'walker_nav_menu_start_el', 'wpse63345_walker_nav_menu_start_el', 10, 4 );

function wpse63345_walker_nav_menu_start_el( $item_output, $item, $depth, $args ) {
    // The mega dropdown only applies to the main navigation.
    // Your theme location name may be different, "main" is just something I tend to use.
    if ( 'main' !== $args->theme_location )
        return $item_output;

    // The mega dropdown needs to be added to one specific menu item.
    // I like to add a custom CSS class for that menu via the admin area.
    // You could also do an item ID check.
    if ( in_array( 'mega-dropdown', $item->classes ) ) {
        $item_output .= '<div class="mega-dropdown">Your custom HTML</div>';
    }

    return $item_output;
}

Leave a Comment