SooperThemes Blog

Where we talk about Drupal, front-end development, open source software and other cool topics

You are here

Better Dropdown Menus for Drupal

Author:JurriaanRoelofs

Datum:8-3-'10

I'm working on a new framework for dropdown menus and I'm running out of ideas. So far I got:

  1. Animation on showing as well as hiding the menu (superfish only supports on-show)
  2. Automatic configurable multi-column dropdowns. When number of items in a submenu exceeds set number a submenu is 2 columns, or 3 columns. (will look like http://www.whitehouse.gov)
  3. Added support for custom easing, including the additional easing from the jQuery easing plugin and some homebrew easing*.
  4. Animated properties are configurable (widh/height/opacity)

So what cool menu feature would you like to have on your next Drupal site? drop your idea in the comments!

*my new and favorite dropdown easing:

  easeInOvershootTurbo: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    return c*(t/=d)*t*t*((s+1)*t - s) + b;
  },
  easeOutOvershootTurbo: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    return c*((t=t/d-1)*t*t*((s+1)*t + s) + 1) + b;
  }

Comments

It's great to see you put your mega drop down idea in action :)

+1 for multi-column, configurable dropdowns. Looking forward to seeing what you come up with!

I'd like to have, as a baseline functionality, the ability to replicate my hand-coded menus from the Archdiocese of St. Louis' website. They do everything I need them to do, but it's a major pain to try re-working them; it's all code, and I haven't found an easy way to integrate them into Drupal...

something rather simple but maybe usefull: a menu item which is not a link. F.e. we have a menu with 2 levels. On level 1 we have items which are just a title for the flyout of level 2.

This is indeed very simple and very useful but unfortunately not easy to achieve, because it would require changes to Drupals menu system.
I'm not even sure about this though. I'm just a themer and I couldn't tell you how much work it would be to get that working.

Maybe this module could be used for those cases:

http://drupal.org/project/special_menu_items

It can also be used to create separators between items.

Thx I'll check it out. Might be fruitful but from the description the module seems a lil hackish to my taste.Oh well, whatever works right.

beeing able to choose between Text and showing an image in the menu or both and decide where to place the image (right/left of text or instead)

Perhaps you could get inspiration here:
http://www.useit.com/alertbox/mega-dropdown-menus.html

I personnaly apply a delay (in and out), when the mouse is on the menu item.
Regards.

Actually am doing research on how 30 of the biggest drupal sites were built (e.g. whitehouse.gov) for a drupalcon presentation on high level trends.

Only have data on navigation for about 8 of them but something that immediately jumped out at me was that 1) Drop down navs are maybe the most common primary nav system, 2) all drop down nav systems i've found thus far were custom, many don't even seem to actually use the drupal menu syste, much less nice menus...

Yeah you see the big companies go through a lot of trouble to get those mega dropdowns working. But then again todays dropdown menus contain as much functionality as a Wordpress blog!
Check out this nice example by DOP.nu, it's mostly views: http://manbijthond.nl/
Are you making a report about your research by the way?

http://manbijthond.nl/ is an interesting one! From glancing at it I can't tell conclusively what's going on, but if its using the block system somehow to file blocks under drop down headings, i think its really promising approach. I mean that's all there is to it right? As soon as you can except that not every drop down needs to be based on nested unordered lists suddenly things become much easier!
***
At the moment the report is an evolving spread sheet, and folders of little pics i'm snapping of common design elements. The plan is to make the final dataset available online as some sort of weird imagecache, charts, cck, views mashup thing around the time of my presentation - i'll probably make a pdf of it for kicks too (would be nice to not have to actually bore my audience with charts on a projector, and saying the results out loud one by one).

This site has a good megadropdown menu: http://breakthrough.org.uk/

It includes icons and other links.
I think integration with views and even mini-panels on hover would be wonderful.

thanks

Thomas

Many mega-drop down sites put not only menu links in menus but also blocks of information, views, maps, and so etc.

This could be easily accomplished and integrated with the rest of Drupal if we had to ability to make a menu item embed a block in its place.

Not only could we put views in menus, we could also embed menus in other menus.

clean and sweet rollover interaction from links to pic-map

http://www.sepaq.com/

Hi there,

I tried using your contact form and got an error - so I thought I'd post. We are really keen to help build a megadropdownmenu module for Drupal. We'd be happy to help sponsor its development and/or help with UI and UX, documentation etc.

I've posted on Drupal.org too - http://drupal.org/node/778452 to see if we can get some traction on this idea.

This is the kind of thing we are looking to get to, where we can embed blocks (and perhaps views/minipanels) into menu-hover regions so we can create:

http://www.wittysparks.com/2010/04/08/a-trend-of-multi-column-mega-drop-...

Add new comment