While development on my Nighthawk theme has been really slow lately , I just found some inspiration which might just give me the kick in the pants that I need to get the job done! I’ve always like the way the big media sites such as fox.com or cbs.com have super-huge dropdown menus. I believe that they are called something like “mega menus” or something silly like that. Whatever they are called, I WANTS ME SOME! and I’m gonna get ‘em :)
I was really inspired after viewing this site for the first time: cognition.happycog.com. While it’s a beautiful site all around, the thing that I like the most is the two links in the upper left-hand side of the page. At the time of this writing they are labeled “Articles” and “Topics”. When you hover over them, awesomeness appears … much like the other sites I mentioned before.
After seeing the Happy Cog site, a light bulb appeared above my head and the filament began to glow! Basically, I thought “How hard would it be to mold a WordPress widget area into a dropdown menu”. So I grabbed a fresh copy of my Proto Theme and had at it.
It was actually fairly easy to do and the possibilities are endless here! You can pretty much do everything you want to inside a widget and being able to display widgets as a “Dropdown menu” is pretty rad imho. You can even use the built-in Custom Menu Widget to provide traditional navigation within the widget area.
Here’s what it looks like:
Check it Out!
I have uploaded a working version of this to Github if anyone is interested. Please lick the following link to visit the project’s page. Completely open to suggestions on this one!
Widget DropdownsHosted by Github
Progress
I’ll be periodically enhancing this project. Here’s the a list of the most recent progress. Feel free to join in at any time :)
| Time | Commit Message |
|---|---|
| readme. | |
| Introduce template parts. Everything is now named 'dropdown'. | |
| First pass at intergating style across menu structures. | |
| CSS Coding Standards. | |
| Import dropdowns from Nighthawk. |
What do you think?
So, I’m pretty excited about this! What do you think? Have you seen this before? Can you think of any issues with it?
Is the widget title acting as a hover trigger for the drop down?
The only thing I see as a possible, albeit small, drawback is behavior in touch screen devices.
Hi Erik. Kinda. The code I have come up with binds a callback to jQuery’s click handler. Personally, I do not like hover menus and wanted to build my own from scratch that works differently. While this has not been tested in anything other than Firefox at the moment, it should play very nicely with mobile devices when finished. The click event seems to translate really well to “touch” and the widget area is marked up below the content and then repositioned via javascript. So if the device does not support js (I believe that there are some of these?) all should be well.
Oh, that makes sense. With that note, I can’t wait until you are done so I can “lift” the implementation. :)
Awesome man! This shouldn’t be an issue. Lifting is highly encouraged :)
Have you ever considered sharing the source of your inspiration? Otherwise, I’ll (im)patiently wait for the code on this one, too.
I see tremendous potential here.
Thanks Cais! The potential here really gets me excited. The code is in the proof of concept stages. I can release it to Github if you would like.
I’d be just as happy to wait if need be although I’d love to see it. The description of how it works is what is really intriguing me at the moment.
I build something similar for http://www.zeitzuleben.de/ – with hierarchical custom post types. As a keyboard user I don’t like these menus in most cases, but sometimes, yes, they are useful. :)
As Erik already pointed out, the implementation on touch screen devices will be tricky. It’s one thing to bind to the click event (rather than the hover), it’s another thing entirely to teach your users to click on it … I use a touch screen all the time, and I completely ignore most sites with dropdowns because I *expect* them to use hover and just break.
The other thing you might want to consider is the use of this method on sites/pages that are using Flash or Java. I know, I know, Flash is evil … but a lot of people might still try to position a Flash or Java applet directly under the nav menu … and dropdowns don’t play well on top of applets.
Still, the idea of widgetizing *anything* is very enticing!
@ Thomas Scholz,
That’s a great point! If I were to try to come up with a tabindex solution for for this, what would the desired functionality be? I think that showing the widget content on focus would be a rather bad idea. Is there any type of standard for this type of thing? Do you know of any sites that have implemented an acceptable solution?
Don’t even think about tabindex. That’s a very dangerous attribute. Usually, you don’t need it.
There seems to be no standard, that’s part of the problem with these menus. The needs for users on a keyboard, a touch screen or a mouse differ sometimes so much that there is no ideal solution.
See http://www.useit.com/alertbox/mega-dropdown-menus.html and http://www.useit.com/alertbox/mega-menus-wrong.html for some inspiration.
ohmygosh,ohmygosh,ohmygosh,ohmygosh!
I want one!
Brilliant idea! Can’t wait to see how it turns out!
Thanks John! I’m pretty excited to see in my new theme too :) I’m thinking that I’ll need to create a few custom widges designed to work with it. First of which would be a Gravatar – vCard thingy.
The proof-of-concept code is on Github if you want to check it out:
https://github.com/mfields/Widget-Dropdowns
Need’s a few more iterations before it is ready for the public :)
I’ve used this plugin on a few projects : http://wpmegamenu.com/
Thanks for the link Paul. I had no idea that the menu ui is extensible to that level. Interesting!
@Michael, thanks for this..It is an interesting move away from hover menus ..cleaner and neater visual
I came acroos another jQuery mega menu which is very interesting too : –
mega menu widget
That link seems to be failing : –
design chemical – mega menu widget