In a previous post, I explored a method whereby “mega menus” could be added to a Thematic-based WordPress site, replacing that framework’s standard jQuery dropdown menus. Mega menus are essentially a dropdown content panel that can have multiple columns of navigation link lists, styled headers/category groupings, etc. — essentially anything you can define as web content!
As such, mega menus provide an intriguing alternative of presenting secondary, tertiary or even deeper content to a user without forcing them to negotiate your site hierarchy through standard navigation design techniques.
Based on the code and script file found at javascriptkit.com, my initial look at this functionality was a sledgehammer “cut-and-replace” approach that required manually rebuilding a site’s navigation menu. The approach worked, but lost the ability to use WordPress’ built-in navigation features for page titling, ordering, etc., as well as Thematic’s jQuery styling. I’ve since had a chance to dig into this topic again and believe I’ve found a way to mitigate most of these limitations and make this technique a very useful addition to a WordPress toolkit.
Important: I use the Thematic framework and child themes as the base for most all of my WordPress development. The code examples below may need to be modified to work with other themes and/or frameworks.
Step 1: Save the referenced CSS and Javascript files from javascriptkit.com into your child theme folder.
Step 2: For the actual content of the mega menu panel, create a new PHP file in your child theme folder (I called it megamenus.php) and enter just the code related to the actual menu panels. (Unlike the original code instructions on javascriptkit.com, we are not including the primary nav links in this file.) Make sure that the CSS selectors used below match those found in the default CSS file you saved in Step 1.
<div id="megamenu1" class="megamenu">
<div class="column">
Your content goes here...
</div>
<div class="column">
Your content goes here...
</div>
</div><!-- megamenu1 -->
Step 3: Instead of manually assembling the site’s primary menu links as outlined in the original tutorials (and my previous post), we’re going to use a jQuery snippet to assign unique ID selectors to WordPress’ existing page links. The following code needs to be added to the <head> section of your page. I prefer to add it via my child theme’s functions file:
// Add megamenu scripts to head
function megamenu_scripts() {?>
<link rel="stylesheet" type="text/css" href="jkmegamenu.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.page-item-123 a').attr("id","megaanchor");
});
</script>
<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','megamenu_scripts');
It is critical that the code snippet assigning the "megaanchor" ID attribute to the default anchor tag for the target page (’123′) comes before the "jkmegamenu.js" file is loaded. The .js file reads these IDs, so they have to be added to the anchor tags before the .js file is loaded. Replace “123″ with the actual page ID of the menu item that you want to attach the megamenu panel to. And of course, make sure that the links to the CSS and JS file are correct for your theme. Note that because WordPress is already loading a jQuery library, I’ve deleted that script declaration from the original code sample to avoid duplication.
Step 4: We also have to load the separate PHP file that we created in Step 2. Add the following action to your functions file to load the content panel code into the header area:
function load_megamenus() {
include 'megamenus.php';
}
add_action('thematic_header', 'load_megamenus');
Step 5: Finally, edit the default CSS file to suit your tastes.
Step 6: To use more than one mega menu on a navigation bar, you’ll need to define the different content sections in your separate PHP file with unique IDs, e.g. megamenu1, megamenu2, etc., then make additional declarations in the wp_head section:
// Add megamenu scripts to head
function megamenu_scripts() {?>
<link rel="stylesheet" type="text/css" href="jkmegamenu.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.page-item-123 a').attr("id","megaanchor1");
jQuery('.page-item-456 a').attr("id","megaanchor2");
});
</script>
<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("megaanchor1", "megamenu1", "mouseover")
jkmegamenu.definemenu("megaanchor2", "megamenu2", "click")
</script>
<?php }
add_action('wp_head','megamenu_scripts');
Note that you’ll probably want to create some content on the pages you’ve attached mega menus to for users who have JavaScript turned off or otherwise disabled since the page’s anchor link will still be active.
* * * * *
To see Mega Menus in action, click on the Portfolio link above and see where I’ve built a custom loop to display thumbnail images, page titles and permalinks from a set of subpages using a custom query. For an example of using this approach to create a multi-column set of navigation links with multiple <?php wp_list_pages(); ?> statements, visit http://contemporacorner.com/ and click on the items in the primary nav bar.
HT: The jQuery method of adding the ID selector to an anchor tag was modified from a technique outlined in this post on wpcandy.com.
4 Comments
Looks great. Would I be right in thinking you still need to hard-code the sub menus? Is there any way to have the main nav, and submenus created on the fly?
Yes, the sub menus still need to be hand coded, though you can mitigate much of it by calling WordPress’ menu functions for each group of links and explicitly stating the parent page. I’ve explored having everything created on the fly, but you end up doing a lot of work repositioning groups of links — or I should say trying to reposition them, since not all groups are going to be the same length/height. As long as you set up your subpages in a logical manner with appropriate parent pages, the editing is fairly straightforward.
Hi Thanks for the two articles on Mega Menus I am also trying to make a 200 page html website into WP . I am not confident in my coding skills. Is there a WP Plugin that will allow me to create mega menu?
I’m not aware of a plugin that will help construct the mega menus, but I have been exploring WP3.0′s new menu features and there’s a lot of possibility there for creating custom groups of menu items to go in a mega menu. You’d still have to manually create and assign the mega menu panels though…
One Trackback
[...] Mega Menus to WordPress By ElShaddai | Published: November 27, 2009 Update: Be sure to read “Mega Menus Redux” for my latest work on integrating this navigation style with [...]