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:
- Html layout for main menu and sub menu - ul/li structures
- Sprinkle of CSS
- Dash of jQuery – uses Hover Intent jQuery (very slick), but can optionally be excluded
- Very minimal on page load initialization.
No comments:
Post a Comment