1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

What is the CSS technique for the dropdown menu?

Discussion in 'CSS' started by serialentre, Mar 4, 2015.

  1. #1
    Hi all,
    SEMrush
    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.
     
    Last edited: Mar 4, 2015
    serialentre, Mar 4, 2015 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #2
    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.
     
    deathshadow, Mar 6, 2015 IP
    COBOLdinosaur likes this.
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,498
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #3
    If you're doing something because you think it's cool, you should consider Eric Raymond's take on user interfaces:
    cheers,

    gary
     
    kk5st, Mar 6, 2015 IP
    COBOLdinosaur likes this.
  4. serialentre

    serialentre Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    30
    #4
    Yikes. Seems like this type of drop down menu isnt very welcomed by professionals. Then why do they build it this way??
     
    serialentre, Mar 6, 2015 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,498
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #5
    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
     
    kk5st, Mar 6, 2015 IP
    deathshadow likes this.
  6. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #6
    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.
     
    COBOLdinosaur, Mar 19, 2015 IP