I don't think this is the official name for it but you may get the idea from the name. Here are work we needed the ability to create a ton of content in drop down menus. As an example here is a quick wire frame that I threw together.

When you hover over a menu item the mega drop down will appear. The important thing to pay attention to here is that the content in the drop down menu should have the ability to contain any markup. There is a great article on site point about these menu's and how they are really starting to crop up everywhere.

I took a couple screen captures of some mega menus that I really like.

GoDaddy

Food Network

There are plenty more examples around the web but these are 2 that I like. Now that I have an idea of what I need to build I needed to figure out how to do it. To accomplish this you are going to need a combination of html/css/js. I did a quick search for a jQuery plugin and found instructions on how I could accomplish this. I decided that I really wanted to understand how the internals worked on this so it was time to create my first jQuery plugin. There are probably plugins out there that do what I am looking for but I needed to really understand how this works in case I need to make modifications in the future.

With that my first jQuery plugin (BigAssMenu) was born. Look for some more information about this plugin in the near future. I want to write about this plugin step by step so people can really follow along with me. Also, don't get to hyped up, it works but I need to come up with some really good examples to show of this plugin. Maybe I will try and recreate the menus above!

 

This entry was posted on February 12, 2010 at 4:00 PM and has received 5078 views. Comments 2 | Print this entry.