Rich Interactive Drop Down Navigation Menus

Before there was CSS, I remember using Macromedia Dreamweaver to create dropdown menus and hover behaviors. Dreamweaver would include the necessary Javascript commands and the menus would just work.

Then, with CSS and tools like Suckerfish dropdowns, code became cleaner and menu creation became easier. However, it was only ordinary dropdown menus until the trend of rich interactive submenus started.


oracle website

These content rich dropdown navigation structures gave submenu a new purpose, a new life. The submenu pictured here became more than just a list. It opened up the opportunity for website owners to highlight an important item within the menu itself.


cisco website

Other than images, some dropdown navigations even built in tabs . Most likely used in this scenario to better categorize websites with humongous and deep information structures.

cisco website

But it didn’t stop there. Developers are now pushing the limit of the dropdown navigation by incorporating login actions into them. As I was saying, rich content is now housed within the dropdown relative to its content. The example above displays such a connection for its partners.

Dunkin Donuts

dunkin donuts website

Dunkin Donuts only recently launched its new website and they too have incorporate this rich content dropdown navigation. As you can see, they’ve placed their store locator directly inside the dropdown menu.

dunkin donuts website

Plus, they didn’t stop at only having the login inside the dropdown navigation. You can even create a new account within the submenu panel now. Phew!

Is this too much of a good thing?

I can understand incorporating logins and forms into the dropdown can free real estate space in the website. However, I feel squeezing too much rich content in a dropdown panel makes it too cluttered. Especially when the designer or developer isn’t careful with the breathing space.

To be honest, Dunkin Donut’s incorporation of the account creation and login form is the limit for me. The near-unavailable gutter space between the 2 forms make it look like a single item.

Share a website you know with this type of dropdown navigation.

Leave a comment