Web Site Menus, What To Use?

I have to say that I appreciate all the many people out there that aid all of us non Web UI layout experts with tips, tricks, and how-to posts.  One of the items I have difficulty with when laying out a menu structure for a site that has more than just a main menu, is what type of menu should I use.  Some of the options maybe vertical or horizontal menu,  tree with +/- nodes or drop down menu, etc.  I had this project where, for some reason, they just wanted a list of hyperlinks on the page for the sub menu, but they had to shorten all the names to ~5-10 characters because there were so many, it was hideous.  My friend Aaron Schnieder recommended using a mega menu.  First thing that came out of my mouth was “what the heck is a MEGA menu?”.  It sounds like some combo move in the 90s video game Killer Instinct.  He gave me this link to demo on the mega menu.  I was amazed, it’s so clean and flexible.  Now, the question is should I always use the MEGA MENU?  I think it depends.  In the case of MSDN library which has that side navigator with a gazillion possibilities the mega menu wouldn’t fit, but if you have a decent sub menu that you want your users to see when hovering over the main menu, the mega menu fits like a glove.  The tutorial on Soh Tanaka’s blog is amazing, basically there’s 4 steps:

  1. Html layout  for main menu and sub menu - ul/li structures
  2. Sprinkle of CSS
  3. Dash of jQuery – uses Hover Intent jQuery (very slick), but can optionally be excluded
  4. Very minimal on page load initialization.

No comments: