Adding Mega Menus to WordPress

Update: Be sure to read “Mega Menus Redux” for my latest work on integrating this navigation style with WordPress.

I am currently working on one of my personal hobby sites, ardously converting it from a hand-coded HTML+CSS site with ~200 pages that I last updated two years ago to a WordPress-based mix of PHP, HTML and CSS that will be much easier to maintain. The bulk of the tedious work – copying, pasting and reformatting 50 pages of tabular product specs – has been done. Now it’s time for general clean up, media management and design touches, including revisiting the menu navigation structure.

One of the things that I hated about the current site experience is that the product pages required drilling down through two levels of category index pages before you got to actual content. I’ve streamlined some of that by reorganizing and consolidating content, but I also wanted to look at the navigation controls and see what I could take advantage of.

I’ve considered a two-tier nav bar in the past to handle the bulk of filtering product categories, but never liked the implementation (though something like this, with a tertiary dropdown, might work). Instead, having just successfully pitched and implemented the concept of “mega menus” on one of my professional “day job” client’s sites, I wanted to see if something similar could be done with WordPress.

Mega menus are essentially a wide dropdown content panel that can have multiple columns of nav lists, styled headers/category groupings, etc. The usual way is to create the panels using HTML and CSS as you would with any web page, then control the dropdown display with CSS and/or JavaScript. This means manually entering all of the navigation labels for each dropdown as well as the target URLs. Ideally I’d like to find a way to automate this with WordPress’ wp_list_pages() or wp_page_menu() functions, but that will be Part 2 of this topic.

WordPress includes a jQuery library by default. Having experienced some of the conflicts between different JavaScript libraries in the past, I was interested to see if there was anything already available that also leveraged jQuery. And there is. I found an example of what I was hoping to implement on javascriptkit.com (JSK) called “Cut & Paste jQuery Mega Menu“. I’m not going to include a functional example here, so give them some click-thru love if you want to see it in action, especially since I’m still working on my site.

So how to integrate into WordPress?

Important: I use the Thematic framework as the base for most all of my Wordpress development. The code examples below may need to be modified to work with WP’s default themes and/or other frameworks.

1. Save the referenced CSS and Javascript files into my child theme folder. Alternately, you could copy the contents of the CSS file into your child style.css file and remove the example CSS link from step 2 below.

2. To add the script declarations to the <head> section of my page, I added this to my child functions file:

// Add plugin scripts to head
function childtheme_scripts() {?>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jkmegamenu.css" />
<script type="text/javascript" src="jkmegamenu.js">

/***********************************************
* jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/

</script>
<script type="text/javascript">

//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")

</script><?php }
add_action('wp_head','childtheme_scripts');

Note that because WordPress is already calling a jQuery library, I’ve deleted JSK’s first script declaration to avoid duplicate script bloat.

3. The example directions now call for the menu’s HTML code to be pasted into your page. I’m not interested in pasting all of this code into my page template, so I needed to define it externally, referencing it where appropriate (see below). As such, I created a nav-menu.php file in my child theme folder and copied in the example code.

4. Note that the example code creates a single instance of a mega menu. To recreate an entire nav bar, we’ll need to reproduce each additional primary nav item and the secondary links that we want in the mega menu dropdown. For each new mega menu, we have to add a new declaration line in the head scripts as well, identifying the anchor ID and menu ID.

<script type="text/javascript">
//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor1", "megamenu1", "mouseover")
jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover")
</script>

5. I need to remove the default Thematic menu and add our new nav bar. A single PHP include declaration will reference the nav-menu.php file that I created.

// First we need to remove the action creating the menu
function remove_access($content) {
remove_action('thematic_header','thematic_access',9);
}
add_action('init', 'remove_access');

// Now we need to rebuild it
function childtheme_access() { ?>
<div id="access">
<div><a href="#content" title="<?php _e('Skip navigation to the content',
'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>
<?php include 'nav-menu.php'; ?>
</div><!-- #access -->
<?php }
add_action('thematic_header','childtheme_access',9);

Alternately, for testing purposes, I added the include declaration to the “belowheader” section, allowing me to compare the normal Thematic/WordPress menu with my manual mega menus.

// Add mega menu below header
function childtheme_megamenu() {
include 'nav-menu.php';
}
add_action('thematic_belowheader','childtheme_megamenu',1);

6. From here, you’ll just need to add the appropriate CSS to display your primary list items in a horizontal fashion — you should be able to crib that from Thematic’s default CSS declarations. Be sure to put a div wrapper in your nav-menu.php file or around the include declaration with a easy ID reference (not “menu” or “sf-menu” if you want to use both nav schemes together for a while!)

Overall, the result works and gives me the nav control that I’m looking for. I’m not excited about having the menus hard coded and would rather leverage WordPress’ wp_list_pages() or wp_page_menu() functions to automatically generate the links inside each mega menu, but that’ll have to be for another time. I don’t think I’ll be able to fully automate everything, since there are specific IDs that have to be included for the JavaScript to work, but even automatically generating the second- and third-level links would be a step in the right direction.

Caveat: I am a JavaScript newbie and will not admit to much more expertise than what I’ve described doing above. If anyone has different or better thoughts on accomplishing this task, please feel free to add a comment below. Thanks!

** UPDATE **
A quick test since writing the above post shows that replacing the individual page lists in the nav-menu.php file with <?php wp_list_pages('child_of=ID&depth=1&title_li=') ?> works just fine, where ID is replaced by the parent page ID.

<div class="column">
<h3>Category Title</h3>
<ul>
<?php wp_list_pages('child_of=287&depth=1&title_li=') ?>
</ul>
</div>

I’m still using the include file and hand coding the layout categories, but the page title and link generation is being handled by WordPress. Much better!

Update: Be sure to read “Mega Menus Redux” for my latest work on integrating this navigation style with WordPress.

Adding Mega Menus to WordPress

2 Comments

3 Trackbacks

Post a Comment