By Adam S on

I was reading the front page case study of the St. Louise Archdioceses new website. They talked about using Mega Drop Down menus. I started to think about implementing something like them. I noticed on www.nationalgeographic.com website they have something like them, but they really aren't drop downs. Each menu item when hovered over triggers a tab. It's really cool and I've been trying to read about jQuery because I would very much like to include this feature in my next build.

Does anybody have thoughts on how to implement this?

Comments

john.kenney’s picture

john.kenney commented

i don't have any particular thoughts on this myself, but yesterday i happened to be reading where some other people were discussing. maybe these threads will be of interest:

http://drupal.org/node/425832
http://drupal.org/node/629664#comment-2300330

perhaps do search to find other threads.

Adam S’s picture

Adam S commented

Thank you for your reply. I'm glad that people are seriously thinking about this in the Drupalshpere.

My idea in not a menu. I'm looking at it a different way. It's a tab. I found this jquery toturial http://trevordavis.net/play/javascript-tabbed-navigation/ . All I need to to is add an id to the menu items that are built with the Dynamic Persistent Menu module and to add a block region wrapped in a div for each content area.

Can you see how this is different than a mega drop down? It's just consolidating the front page of a magazine or newspaper site into "mega tabs" on the top part of the page!!! I think that is simple brilliant. Also, although they just add to the front page so with out javascript enabled as the Dynamic Persistent Menu degrades gracefully so will these tabs. They just wont show. Keeping that in mind no harm done.

mclaren’s picture

mclaren commented

There is now megamenu project in development

Jeff Burnz’s picture

Jeff Burnz commented

I've been doing them with hoverIntent jQuery plugin, pretty simple up to now, just creating a php file and including that where I need it into page.tpl.php - its all rather rudimentary but so far I've not really encountered much call for dynamic content in the megamenu and if I do well I could get more fancy.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
picxelplay’s picture

picxelplay commented

Check out this tutorial and its Demo:
http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/

----
Sudo Kill Cylons

Adam S’s picture

Adam S commented

Is it important that the work without javascript enabled? Although I don't think that it is very important in this day and age, a pure CSS mega dropdown might be the way to go. http://www.visibilityinherit.com/code/mega-drop-down.php It's easy to add jQuery behaivors to the drop downs.