Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
2  
What is wrong with a plugin? –  toscho Aug 28 '12 at 15:17
    
Well I don't really see the point in adding a plugin when the contents of the mega dropdown do not need to be updateable via the admin system. –  V Neal Aug 28 '12 at 15:33
    
I've used the .load function in jQuery. Simply cannot get my head around extended the walker. –  V Neal Aug 29 '12 at 18:43
add comment

2 Answers

If you don't want to use a plugin, you can use the HTML version of JQuery Mega DropDown Menu In this case you must manage the menu items via code!

share|improve this answer
    
Is there no way of injecting the div via jQuery? –  V Neal Aug 28 '12 at 16:10
    
To clarify - I'd like the top level menu items to be editable via Wordpress HOWEVER the content of the div that I'd like to appear on hover of page-item-13, to be hardcoded / not editable. –  V Neal Aug 28 '12 at 16:15
add comment

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;
}
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.