What is the CSS technique for the dropdown menu?

Hi all,

As I am learning new techniques, I saw this menu on http://www.bodybuilding.com/.

I personally think the dropdown menu is pretty cool.

1. From my understanding, I could do a display: hide the dropdown menu UL item and do a display: show upon hover of main menu LI item.

2. I also found out that it can be done by setting submenu UL z-index to -1 and opacity to 0. Upon hover, z-index to 0 and opacity to
1.

http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css

3. Also, having the photos stacked up adjacent to each other is pretty neat. Should I be using div elements to create the image and buttons?

Can someone point on the essential techniques to apply or let me know if I'm on the right track? Appreciate it.

 

See, to me that's such a bloated slow inaccessible train wreck, at first I was thinking "what dropdown menu" -- and then second I was thinking we have a different definition of the word "cool".

It's painfully slow, it falls apart miserably at smaller resolutions, it breaks scrolling on really small displays...

Of course that entire page is a laundry list of how not to build a website reeking of art faygelah BS that would for me -- as a USER of websites -- navigate away before it even loaded, or if it DID actually load fast (yeah, right) probably bounce anyways.

 

If you're doing something because you think it's cool, you should consider Eric Raymond's take on user interfaces:

cheers,

gary

 

Yikes. Seems like this type of drop down menu isnt very welcomed by professionals. Then why do they build it this way??

 

There is nothing intrinsically wrong with drop down menus. The two overriding issues are 1) poor development planning for the site architecture, and 2) small screen rendering (as mentioned by ds).

The first is another strike against prefabricated themes. You must have your site architecture in place and have a visitor oriented vocabulary established. By vocabulary, I mean the words you use to tell about your company, product and service. These words are chosen by your visitors when they hit up Google et al looking for whatever you're selling. No matter how much the marketing dweebs love calling your product 'Whiz-bang-doodads', if the potential customer calls them widgets when he searches, you'd better do the same (in addition to Whiz-...).

Let your customer determine your vocabulary. That includes your menus. The job of the menu is to make it easy for him to find what he wants to find, learn what he wants to learn and buy what he wants to buy. Don't confuse him with too many choices; he may not know exactly what he wants. Lead him first in the right direction and then explain the differences. If you do that, you find you often don't need all those sub menus. Who knows, he may discover that he likes something better and buy it instead, often creating an up-sell.

Usability experts point to the number seven as the optimal maximum number of links at the top level. Even if these top level items have sub menus, they should each link to a page that contains the sub links. This will save you a broken menu on mobiles, as the sub menus need not be shown at all.

cheers,

gary

 

First of all the site you think is cool; is a huge load of crap. If I ever delivered a mess like that to a client it would be the last work they ever give me and I would get badmouthed all over town.

If you must have a drop down menu the you can look at my Dropdown menu article. It is not something I recommend because it is really weak design. The article just uses crude formats to display the basic non-scripted, CSS transitions methods that can be used to avoid the bloat that you get if you use jquery plugins or the pure trash themes available for such things. I prefer flat navigation. A set of links at the top level to category pages that can give information about the options to the next level down, instead of turning a menu at the top level into a sitemap that list every possible page on the site and takes 10 seconds to load and render.