CSS menus

Discussion in 'Web Design and Development' started by Dunmail, May 20, 2010.

  1. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #1
    I got asked this at work yesterday and it's got me slightly baffled. The request came indirectly from my department boss.

    The issue is with using CSS drop down menus on a laptop. He was wondering if it was possible to be able to move diagonally from menu to submenu rather than going in a 'L' shaped path as he has problems being that accurate using the trackpad. I.e. when the sub-menu flies out, he wishes to be able to cut the corner as it were.

    Since most (all?) CSS menus work on the :hover pseudo state, I was wondering if the effective area of the sub-menus could be extended in some way beyond the visible clickable area? I don't (currently) have access to the HTML source or CSS so can't say exactly how they are done.

    Not a pressing issue but I thought I'd ask.
     
  2. citizenzen macrumors 65816

    Joined:
    Mar 22, 2010
    #2
    Is your name "Dilbert" by any chance?

    "Yes boss, let me spend hours trying to find a solution to compensate for your lazy habits"
     
  3. SailorTom macrumors regular

    Joined:
    May 15, 2008
    #3
    One of my pet hates about css menus too.

    I've never tried using them, but perhaps setting a div to contain the hierarchy would work, i think it would have to be set width and height in css though, so a bit of trail and error to get it working.
     
  4. citizenzen macrumors 65816

    Joined:
    Mar 22, 2010
    #4
    Here's a thought to pass on to your boss...

    Let's say you have drop-down menus X, Y, Z. If you were in Y, you wouldn't know to which side your boss was going to scroll to, so you would also have to open X and Z. Every menu choice would open at least one other menu, which might make your boss happy, but would tend to confuse any user of normal intelligence.


    It isn't just CSS menus. Please show me any Apple menu or Adobe menu, for instance, that doesn't require you to hover over the top item to get the drop down list.
     
  5. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #5
    Like what? You can use absolute positioning to move the submenu up a tad. Or just use a javascript setTimeout and clearTimeout function.
     
  6. SailorTom macrumors regular

    Joined:
    May 15, 2008
    #6
    Good point, well made. Perhaps the issue then is more with exploring the menus. If I bring up a submenu then decide i want to navigate back to the main menu to another item, my finger will take the most direct path, which may be diagonally off the menu space, in which case the whole set of menus will disappear. This does not happen in a system menu. Also if the submenu is very long I might want to navigate diagonally to an item in it. This may mean crossing to a different element in the main menu on the way, in which case the submenu will close or be replaced. Again this is possible in a system menu - only if you stop at another item does that become highlighted.

    These javascript functions well may be the answer, it'd be interesting to see them in action
     
  7. carlosbutler macrumors 6502a

    carlosbutler

    Joined:
    Feb 24, 2008
    Location:
    London City
    #7
    A decent menu would require you to pause of the element for a bit before it opens. Rubbish menus dont do that, and annoy everyone because of the reason you just said.

    You could easily have a horizontal menu that, when clicked on a list item, would open up another list below it. After getting that sorted with JS go on to adding decent smooth effects that push everything below that element down and all for more space.
     
  8. SailorTom macrumors regular

    Joined:
    May 15, 2008
    #8
    Aye. What about navigating away from the menus completely. I'm sure the javascript magic will solve this problem. I'm not that familar with javascript atm, never had a reason to use it. This is the sort of thing some downloadable code would be useful for.
     
  9. Dunmail thread starter macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #9
    Thanks everyone, been out enjoying the Lakeland fells in the glorious weather that we currently have so not had chance to reply till now.

    The Javascript idea to keep the submenu open for a short while sounds like it would work. The problem with using the CSS :hover state is that, of course, as soon as you stop hovering the browser reverts to the normal state - which is what it's meant to do. I wonder if CSS3 transitions would help in the future, though in this particular case it's a corporate intranet site and we are IE only.
     
  10. SailorTom macrumors regular

    Joined:
    May 15, 2008
    #10
    Maybe, but I think this is the sort of behaviour that would be better supported by html. It's not a style, more a certain type of element we want. HTML5 has the menu element which may give some of the functionality, but its aimed at web apps and commands rather than navigation. And still not sure how browsers would interpret the menu tag
     

Share This Page