How to Create a Mega Menu in a WordPress Theme

Any site or blog has navigation menus. They are a given. Some sites have interestingly styled ones. A week ago we had a requirement to customize a theme for a client. Despite our many out-of-the ordinary, innovative, suggestions for navigation menus (which we considered good), the client wanted a more “serious look and feel” (his words not ours). Not a problem. We’re up for any challenge. But instead of the usual menus, we suggested (because of his restrictive requirement) it would be apt to have a Mega Menu.

[space]

What is a Mega Menu?

Now a Mega Menu, is not a simple drop-down menu. It contains a kind of enlarged sub-menu. You must have certainly come across one. This kind of menu caters to a professional look. It is a great way to provide navigation information to categorised content, and to present data that may be located deep in your site. A Mega Menu can have images and icons, which provide for a user-friendly experience.

[space]

How did we provide a Mega Menu?

In case you wanted to have a Mega Menu as part of your navigation menus, you would need to do the following:

1. Provide an additional custom field for the Menu post type
   • This field will be later used to add contents to the Mega Menu
2. Show the custom field each time a menu is being created
   • Create a class which extends Walker_Nav_Menu to display our custom field
   • This will be our custom walker field object
   • Update wp_nav_menu to include the walker field object
3. Add CSS style classes to style your Mega Menu

(Incase you are lost, do not worry. We will guide you through this.)

[space]

Create a Custom Meta Field for Menu

We used this field to input simple HTML data, which will be used to style and organize the contents, for the Mega Menu.

To create a meta field for the menu post type, we made use of the Sweet Custom Menu Plugin. Download and install this plugin. Basically what this plugin does, is provides an option to add attributes to your menu. A custom field subtitle (the name for the field is provided by the plugin) is created, but not yet displayed with the menu.

Reference: Learn more about the Sweet Custom Menu plugin. Read about how the plugin was created.

[space]

Displaying the custom meta field in a Menu

To include the meta field in the menu, we need to display it through the wp_nav_menu(). This loop displays the menu attributes.

1. Firstly we had to extend the Walker_Nav_Menu, and create a custom walker object, which will add our custom field(subtitle)  to be displayed. Our custom class, named My_Walker, will have to be placed in the functions.php file of your theme. We have modified the start_el function, to include our field.

class My_Walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';

        $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $item->subtitle;
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

To read more about Walker_Nav_Menu, and the functions, refer this link.

2. Next we had to include the custom walker object in the Nav Menu Loop. To ensure that the custom walker object is picked up, replace the wp_nav_menu( array(…, with the following, in the header.php.

$walk = new My_Walker();
wp_nav_menu( array( 'theme_location' => 'primary','menu_class' => 'nav navbar-nav navbar-right', 'items_wrap' => '<ul>%3$s</ul>', 'walker' => $walk ) );

OR (you can add a filter in the child theme)

function my_wp_nav_menu_args( $args = '' ) {
  $args['walker'] = new My_Walker();
  return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

Now, when you create a new menu, the custom field will be added to every menu item you add.

Styling the Mega Menu

We used a set of CSS classes to style our Mega Menu. You could add additional styles as per your requirement. In case you would want to use the same ones, copy this code to the style.css file of your theme.

/* Mega Menu */
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns,
.dropdown_fullwidth {
  margin:-3px auto;
  position:absolute;
  left:-999em; /* Hides the drop down */
  text-align:left;
  padding:10px 5px 10px 5px;
  border:1px solid #777777;
  border-top: 2px solid #960000;

  /* Gradient background */
  background:#FFF;

  /* Rounded Corners */
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  border-radius: 0px 0px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
.dropdown_fullwidth{width: 80%;}

ul.navbar-nav > li:hover > .dropdown_1column,
ul.navbar-nav > li:hover >.dropdown_2columns,
ul.navbar-nav > li:hover > .dropdown_3columns,
ul.navbar-nav > li:hover >.dropdown_4columns,
ul.navbar-nav > li:hover >.dropdown_5columns {
  left:-1px;top:auto;
}

ul.navbar-nav > li:hover >.dropdown_fullwidth{
  position: fixed;
  left:10%;top:auto;
  z-index: 99;
}

Reference: How to Build a CSS3 Mega Drop-Down Menu.

[space]

Finally, how to use this custom field to create a Mega Menu

Eventually, this is how the interface appeared to the client, and he would need to do the following to create a Mega Menu:

• To add a Mega Menu, he would need to add a Link to the Menu Structure. He would set the desired name but set URL to #

• He can choose out of all the style classes we have provided to style the Mega Menu div. And add the contents to be displayed in the Menu would be shown using simple HTML tags

[space]

Needless to say the client was happy. A Mega Menu is a great way to provide a preview to the contents of any site. And with the approach we took, it worked well with the client’s current theme, and he could customize it in any way he wanted.

But this is an approach we took, because it fit our requirement. Certainly there are some themes out there, which already provide options for a Mega Menu or other plugins you could use. Incase you had a better solution or had any further questions, do share your knowledge or queries with other readers in the comment section below.