These looked like a cool and simple thing to reproduce, so I gave it a shot and came up with something that I think works pretty nicely.
It wasn’t as simple as I thought, and I don’t think my code is the greatest, so I’m open to suggestions. I think this could form the basis for a jQuery plugin but I’ve never created a jQuery plugin so I’m holding off on that for now.
Here’s the demo link if you want to view it before reading the description below:
Features of the Drop-Down Menus
Here are some characteristics of the CBC version, that I incorporated into mine:
- The drop-down menus appear on click, rather than the usual hover
- Instead of being positioned absolutely with z-index to overlay the content below, each menu slides down and pushes the rest of the content down with it
- The content in each menu is loaded with Ajax
- Once opened, the functionality is much like a tab switcher
- There are no non-mega drop-downs mixed in, so they all work the same way, taking up the width of the entire page, like regular content
- The selected menu’s link has an active state
- The drop-down menu will not slide up unless the link of the currently-open menu is clicked; if a link of a non-open menu is clicked, the drop-down remains in place, and the content is updated accordingly
- As an alternative to clicking the active menu item to slide up the drop-down, there’s a “close” button in the top right corner, much like you’d see in a lightbox or other modal window
- Triangle indicators are present for each drop-down link; the active menu has an upward-pointing triangle indicating “slide me back up”
- Animated loading graphic while content loads, a common Ajax-based solution
- Works roughly the same in every browser from what I can tell
In addition to those features, my version includes:
- The URL changes using hash values, to enable deep linking (although it still has the problem of no back button which can be resolved with a plugin)
- The up/down arrows are HTML entities
- Each menu is populated from an HTML file in a “dropdowns” directory; this is just a simple method to mimic CMS-driven drop-downs — the content can pretty much come from anywhere
- You can easily add or remove menu items; just add an associated page in the “dropdowns” menu and link to the page (the link text should have the same name as the file minus the file exension)
Overview of the Code
Here’s a direct link to the live JS file if you want to take a peek. You can view the demo or download all the files using the buttons below.
And let me know if you think this style of mega menus is more or less usable than the traditional drop-downs that appear/disappear on mouse over.