SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onClick vs onMouseover drop down menus

    I've noticed that alot of websites lately have drop down menus, but instead of having an automatic onmouseover (hover) effect, there is a click effect. So to make the menu appear, you must either click on the tab or click on an arrow beside the link.

    Facebook and Linkedin both do this.

    I personally find this more user friendly ... also most of the time I do not need to see the drop down menu.

    What do you guys think? Do you see this is as upcoming usability trend?
    I can't believe I ate the whole thing

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    To have the menu only display on click means that it requires JavaScript.

    A menu that displays when the mouse hovers over it can be done entirely with CSS and so is more accessible. The only JavaScript would be to patch old browsers that don't properly understand CSS.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Regardless of it being crafted with Javascript and CSS or just CSS alone, a user can't tell the difference.

    And I generally use FF3 and Safari when browsing the web, but I still come across the manual drop down menus.
    I can't believe I ate the whole thing

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Regardless of it being crafted with Javascript and CSS or just CSS alone, a user can't tell the difference.
    They can when they can't use Javascript. Javascript is a crutch that, until it is available on EVERY user agent and wholly enters through EVERY corporate BOFH Sysadmin's firewall (and seriously that'll never happen so long as some 12-year-old can always think up a new way to use Javascript to hurt people or steal from them), should be considered an "extra" to make a site nice (onClick is nice in that you can often leave the menu clicked open while your mouse moves back around the site) but never necessary to the basic functionality of the site.

    If it needs JS to work, it's either broken, or not a web page but a web app. Like the bank has.

    That said, onclick is quite nice. Although I almost never experience it because I don't surf with JS on (so, all those times I was a Digital Point, no cookies from Ebay ending up on my computer : )

    As far as usabillity (and accessibility when JS is enabled), I think it can enhance it, as it can account for poor mouse coordination (hovers can disappear and if it's a ridiculously deep menu that sucks when you have to re-hover through all those layers because you sneezed) and Javascript is often used to help keyboard accessibility with drop-downs (keyboarders obviously don't :hover).
    And, I dunno, it feels more stable? (stevig) when you click through a menu than hover. Hover seems so flightly and insubstantial.

  5. #5
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They can when they can't use Javascript.
    Damn you beat me too it! Either two things will happen with JS:
    - The whole menu will appear, breaking the layout or simply looking stupid
    - The submenu just doesn't appear

    I think it can enhance it, as it can account for poor mouse coordination
    My god not wrong, nothing annoys me more than going through 4 menus to move my cursor 1px off by accident and having the whole damn thing close. Perhaps padding can be used to create an invisible buffer (perhaps 40px) so that if the cursor does move a touch off it still stays open. Probably rather easy to do.

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    So of course, the perfect thing is a normal accessible-as-possible Suckerfish and then a JS layer on top which removes the hover stuff and replaces it with onClick (and onFocus I guess, can't act like those List Apart fundies who somehow forgot the keyboarders! : )

    Best of both worlds : )

  7. #7
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would prefer to click on the menu item because I find it so annoying when I move my cursor on something that's positioned too close to the drop-down menu.

    Typical example. On that website if I do a search in the search box and then click on a search result, often the slide-out menu on the left sides out when I don't want it to. I think it's down to insufficient padding. But the problem would be solved if a click was necessary to get the menu to slide out. However, I realise that using CSS menus is more accessible.

    I surf with JS on, so I wouldn't have a problem if JS was used. But I don't know how many others can say that.

  8. #8
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    To have the menu only display on click means that it requires JavaScript.
    It could fall back to server side or show the menu when script is off.

    Quote Originally Posted by felgall View Post
    A menu that displays when the mouse hovers over it can be done entirely with CSS and so is more accessible. The only JavaScript would be to patch old browsers that don't properly understand CSS.
    It's not accessible for people who use a hoverless pointing device (like iPhone).
    Simon Pieters

  9. #9
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, JS hover menus can use timeouts so to be less disruptive than CSS hover menus.
    Simon Pieters

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    It's not accessible for people who use a hoverless pointing device (like iPhone).
    Would that be a stylus or is it something different (I've actually never seen an iPhone but I have seen people having trouble navigating websites with a stylus or a touchscreen)?

    Accessibility issues like this are good reasons to first, try to avoid using such a menu if possible, and second, making the top-level menu items clickable for those who cannot get the drop-down to appear for any reason.

    Timeouts suck when you DO use a mouse, but you're very very slow with it : ) Though I guess you could have a very long time set on it. If the menu were very deep, I would hate to have worked so carefully setting my mouse and moving through the dropdowns only to have reached the timeout before getting to my submenu. I'm usually pretty fast with a mouse but using my husband's mouse I need to be very very slow as it jitters (something wrong with it). My mom used to mouse very slowly because she simply had difficulty working it in the first place. As would anyone with minor tremors.

  11. #11
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lately I've been favoring the click menus more than the hovers. In terms of usability and design, I too find it more user friendly and intuitive as it functions more like traditional desktop applications. Click menus also works great on touchscreens and small screen devices like netbooks and PDA's.

  12. #12
    SitePoint Zealot FaridHadi's Avatar
    Join Date
    Nov 2008
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like the idea of an onClick falling back on an onMouseover but I wonder how many developers would bother about the tiny percentage of surfers with JS turned off. I'd say it depends on the site/application and it's target audience. I personally prefer the click.

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Farid: if your targeted audience is something like "20-something gamers with all the latest and greatest" with a related but separate forum which attracts the audience, then I'd say the click alone is likely going to work.

    Most websites are targeted to "everyone" mostly, including search bots (which in the above example, might index the site via the forum instead, assuming the forum did not have the click menu while the actual gaming site did). Again, if the top-level menu items are clickable to a sort of mini-site-map with all the links that are actually under that dropdown then it is still navigable for bots and blinks and lynx and mouseless (not that you couldn't add focus/blur stuff to the JS too, for keyboarders) etc. just not as smoothly or easily.

    My single dropdown menu, I'm already trying to change into something else. I've pretty much had it with dropdowns. They are piles of code, sometimes with a heap of JS on top, and still not easily navigable for everyone even when you do all the extras.

  14. #14
    SitePoint Zealot FaridHadi's Avatar
    Join Date
    Nov 2008
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Stomme poes:
    According to the stats on W3C 95&#37; of the users had JS turned on in January 2008 (The stats for Jan 2009 are not yet out).
    These stats are extracted from W3C's log-files, which I believe would have a slightly tech savvier audience. In my opinion, this target group is likelier to turn JS off than the normal user, which won't know what JS is let alone know how to or that they can turn JS off. So, according to me, the actual number of surfers with JS turned off would be lower than 5% (Please correct me if I'm wrong). My point here being that your target doesn't need to be the "20-something gamers with all the latest and greatest" for it to be OK to use dropdowns with click.

    As for the bots, I don't see why it should be any more difficult for them to follow the links in a dropdown using click than those using mouseover? As long as your markup is correct it shouldn't make a difference.

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    If "click" is something you do with Javascript, bots don't react to Javascript (yet).

    As for the other, I believe you are correct as far as the stats-- those who simply don't have JS or complete JS or fully-compliant JS in their user agents are pretty small, maybe even less than 5% (and those like me who always have it turned off, usually can figure out to turn it on if it seems it's necessary : )
    however, having a backup/default is still a Good Thing. Imagine (not hard) that you're the only person in your small town in a wheelchair-- even temporarily due to your bunion surgery : ) You will appreciate more than anyone else that your bank had a ramp installed.

    You're surfing the Tubes with your mobile phone. It's new and fancy, and can handle JS (unlike my boss's which is only a year old but doesn't support a single hair of scripting). It also drains your battery in under a minute or two. You turn scrips off so you can continue surfing-- you're on the train to school or work and have another half hour to wait til your stop.

    Now imaging that you're blind, and because of this you actually use the Internets for even the mundane things (shopping for groceries is a nice one, looking up bus schedules is another, finding info out about upcoming tv shows lawlz yes tv shows) and yes you're used to frustrating sites, you're used to surfing more slowly than the average viewer... but people appreciate that you've taken the time to make it easier on them. The other 99% of your viewers won't notice a single thing. This is actually a good sign-- a good website is one where people remember the content but don't remember anything else about it-- people remember what gave them trouble is all.

    What I meant about the 20-something gamers is, you can pretty much guarentee that they have scripts on. Users within an intranet are another. But beyond that, you have little or no control. And that's why you "build defensively".

    Ultimately, though, it's up to you, the web developer. You need to choose what needs to go on the page, what's worth the time and what isn't. After that, the decision rests in your visitors. Not all of them will trigger your stats, and likely most of them (people being lazy and all) won't bother to contact you about anything they found a pain or frustrating. The one or two who might are representing a larger group of don't-care's. We got a call the other week about a page looking unreadable in FireFox. We are aware that this page is 10 years old and it's just not on the list yet (or at the very bottom) to get rewritten. We know from stats (inaccurate as they are) that the main page gets plenty of hits from FF users (and a few others like Safari). They taper off fast after that. Only one call, representing actually every single user who isn't using IE : ) Because that page was written for IE alone (yes, we're chomping at the bit to rewrite it... bleh, no time).

  16. #16
    SitePoint Zealot FaridHadi's Avatar
    Join Date
    Nov 2008
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Stomme poes:
    Yes, I'm referring to click being something that will have to be done with the use of JS and no bots don't react to JS. Bots read your source code, i.e. markup, and I'm saying that your markup for a dropdown using JS doesn't need to be much different from the markup not using JS. I'm talking about progressive enhancement.

    Now lets say that I did get a bunion surgery, and I'm in a wheelchair, and I visit the mall. Using the elevator would be my only choice and I would really appreciate it but wouldn't everyone else appreciate the escalators? =)

    As for the rest of your post, I think it goes on to argue about dropdown menus being no good and not about if they should expand when you hover the parent item or when you click it. =)

  17. #17
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FaridHadi View Post
    According to the stats on W3C 95% of the users had JS turned on in January 2008 (The stats for Jan 2009 are not yet out).
    Do you have a link for this? Are you sure it's W3C stats and not W3Schools? (That's a common source for statistics references, but it has nothing to do with W3C.)

    Anyway, let's say 5% have JavaScript disabled. Recent figures say that the number of people on the Web has exceeded 1 billion. That means you may be excluding 50 million people by relying on JavaScript...

    FWIW, I'm one of those 5%.
    Birnam wood is come to Dunsinane

  18. #18
    SitePoint Zealot FaridHadi's Avatar
    Join Date
    Nov 2008
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Do you have a link for this? Are you sure it's W3C stats and not W3Schools? (That's a common source for statistics references, but it has nothing to do with W3C.)

    Anyway, let's say 5% have JavaScript disabled. Recent figures say that the number of people on the Web has exceeded 1 billion. That means you may be excluding 50 million people by relying on JavaScript...

    FWIW, I'm one of those 5%.
    You're right, I mean W3Schools not W3C. =) Thanks for correcting me.

    I'm not saying neglect the people with JS turned off. I'm talking about progressive enhancement, i.e. make things better for people who have it turned on.

  19. #19
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Yes, I'm referring to click being something that will have to be done with the use of JS and no bots don't react to JS. Bots read your source code, i.e. markup, and I'm saying that your markup for a dropdown using JS doesn't need to be much different from the markup not using JS. I'm talking about progressive enhancement.
    Yeah, if you're using JS to have existing HTML simply appear onscreen, it is accessible to bots.
    Many of the onClick Javajunk menus I see do not do this-- they bring new content to the page. It's not in the source.

    Re the elevator: with onClick, here it's better to have both an escalator for the majority and the elevator for the moms and old people. : ) But as I said earlier, if it's your site it's a decision you have to make for your own reasons.

    And yeah, the drop-downiness of menus itself I think can be a problem. But as far as specifically the onclick, as I said in an earlier post it can be more accessible-- to certain people-- because clicking and having that submenu stay onscreen is rather nice, esp if you have poor mouse control.

  20. #20
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FaridHadi View Post
    You're right, I mean W3Schools not W3C. =) Thanks for correcting me.
    It's a common mistake.

    Quote Originally Posted by FaridHadi View Post
    I'm not saying neglect the people with JS turned off. I'm talking about progressive enhancement, i.e. make things better for people who have it turned on.
    Ah. In that case I'm in full agreement with you.
    Birnam wood is come to Dunsinane

  21. #21
    SitePoint Zealot FaridHadi's Avatar
    Join Date
    Nov 2008
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Yeah, if you're using JS to have existing HTML simply appear onscreen, it is accessible to bots.
    Many of the onClick Javajunk menus I see do not do this-- they bring new content to the page. It's not in the source.
    Yes, you're probably right about this. I've never been a fan of frameworks and prefer to write my own code for most things. Many say I'm reinventing the wheel by doing so but I feel it's worth it as my code does exactly what I want it to do, nothing more, nothing less. But this is a totally different topic so I'll just leave it at that =)

    Quote Originally Posted by Stomme poes View Post
    Re the elevator: with onClick, here it's better to have both an escalator for the majority and the elevator for the moms and old people. : )
    Wonderful parallels we're drawing here =) but yes, exactly my point, totally agree.

    Quote Originally Posted by Stomme poes View Post
    And yeah, the drop-downiness of menus itself I think can be a problem.
    I agree with you on this too but sometimes I guess it's a necessary evil. I also think that dropdown menu's can work great on web apps, rather than websites.
    Last edited by FaridHadi; Feb 3, 2009 at 22:56. Reason: typo

  22. #22
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Would that be a stylus or is it something different (I've actually never seen an iPhone but I have seen people having trouble navigating websites with a stylus or a touchscreen)?
    Actually on the iPhone you'd just use your fingers, but it's the same issue with devices that use a stylus.
    Simon Pieters

  23. #23
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Actually on the iPhone you'd just use your fingers, but it's the same issue with devices that use a stylus.
    Your fingers?? Ew! Is there a special finger-oil degreaser available for the iphone??? I don't think anyone in the world is without finger oil (there are a very few without fingerprint ridges). Eventually it smears and collects ew things and ew like EW!

    Quote Originally Posted by Farid
    Yes, you're probably right about this. I've never been a fan of frameworks and prefer to write my own code for most things. Many say I'm reinventing the wheel by doing so but I feel it's worth it as my code does exactly what I want it to do, nothing more, nothing less. But this is a totally different topic so I'll just leave it at that =)
    If it's a better wheel, it's totally worth it. Though there are some better wheels out there too. But if they're too hard to find, still better to make your own.
    I agree with you on this too but sometimes I guess it's a necessary evil. I also think that dropdown menu's can work great on web apps, rather than websites.
    They are good space-savers, and can help categorise large groups of linkies. Because of usability I'm trying to just rather have more pages, but I have the freedom to do this. I can usually convince the boss : )

  24. #24
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For example, if I have a Suckerfish style menu with the onclick stuff on top, but when an user who has Javascript disabled visits my site and uses the menu, what they'll get is the usual hover behaviour (CSS only menu) instead of onclick (CSS menu with Javascript on top). Is that how the menu would degrade gracefully? Is this feasible? I'm a complete newbie when it comes to Javascript stuff.

  25. #25
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Sounds so, assuming there's also some sort of onFocus for the JS and :focus for the regular (limited as that is).

    You might want to read Mike's "rant" of A List Apart's Javascript-on-top-of-Suckerfish article (and read the ALA article too) to see if there's something you didn't think of.
    http://green-beast.com/blog/?p=312


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •