CSS menus

[Dunmail]

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.

 

[citizenzen]

The request came indirectly from my department boss.

Is your name "Dilbert" by any chance?

"Yes boss, let me spend hours trying to find a solution to compensate for your lazy habits"

 

[SailorTom]

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.

 

[citizenzen]

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.

One of my pet hates about css menus too.

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.

 

[7on]

Like what? You can use absolute positioning to move the submenu up a tad. Or just use a javascript setTimeout and clearTimeout function.

 

[SailorTom]

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.

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.

Like what? You can use absolute positioning to move the submenu up a tad. Or just use a javascript setTimeout and clearTimeout function.

These javascript functions well may be the answer, it'd be interesting to see them in action

 

[carlosbutler]

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.

 

[SailorTom]

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.

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.

 

[Dunmail]

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.

 

[SailorTom]

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.

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