PDA

View Full Version : Delay on CSS multi-level menu


patricktt
12-06-2009, 10:55 AM
Morning everyone, it seems to me that with the increasing simplicity and popularity of css multi-level menus, the flyout/dropdowns are increasingly quick! On 2 recent projects, the client has requested that the "disappear" has a bit of a delay on it, so that it is easier to navigate.

Has anyone come across a good solution to this? As far as I can see, to add a delay is to use javascript of some sort, and to do that, would replace the css functionality - reducing usability and seo advantages.

Thought I would see if anyone had done this before, or knows of a good solution, other than slowing the mouse down on the user's computer ;)

Thanks

Patrick

tuna
12-06-2009, 11:06 AM
Has anyone come across a good solution to this? As far as I can see, to add a delay is to use javascript of some sort, and to do that, would replace the css functionality - reducing usability and seo advantages.

Thanks

Patrick
Pat

if you use javascript by use progressive enhancement you can write your JS such that if there is no JS present your CSS menus still work at a basic level.

The use of various JS libraries and frameworks, such as jQuery can overcome these issues that you have. Still I would be considering the sites audience. Get to the heart of the problem, Which in this case is the css menus disappear too quick or all the information can be seen. Often when you understand the problem their are easier and simpler solution.

patricktt
12-06-2009, 11:34 AM
well the problem is just that the menu drops down, and some items fly out. The website in question is www.evss.com.au (http://www.evss.com.au)

when you go to the flyout one, it is quite easy for your mouse to slip off, having to go through the lot again, whereas if there was a little delay before the menu disappears, it would not be such a problem.

madpilot
12-06-2009, 11:46 AM
well the problem is just that the menu drops down, and some items fly out. The website in question is www.evss.com.au (http://www.evss.com.au)

when you go to the flyout one, it is quite easy for your mouse to slip off, having to go through the lot again, whereas if there was a little delay before the menu disappears, it would not be such a problem.

You have to use JS - You can't do animation in CSS (yet (http://webkit.org/blog/138/css-animation/)).

What Gary said about progessively adding the JS is bang on the money.

I would duplicate the hover pseudo-class with a real class (If you are using suckerfish menus, you are probably already doing that) then on mouse over add the new class to the menu, then on mouse out remove the class after a setTimeout of what ever the delay is.

Note though that you are going to get layering issue as the old menus may hide new menus during the delay period.

I would query whether a drop down menu of that structure is really the best for that site - if the menu is gonna be that big, a side menu would probably be more suitable...

tuna
12-06-2009, 12:32 PM
I would query whether a drop down menu of that structure is really the best for that site - if the menu is gonna be that big, a side menu would probably be more suitable...

Or a Big arse Mega Menu *shudder* :)

Ray
12-06-2009, 12:34 PM
This jquery plugin (http://cherne.net/brian/resources/jquery.hoverIntent.html) may be what you're after?

patricktt
12-06-2009, 10:12 PM
This jquery plugin (http://cherne.net/brian/resources/jquery.hoverIntent.html) may be what you're after?

This looks pretty cool, not sure if it is exactly what I am after, but it does look cool! I think the best idea probably is as above, progressively adding the js.

Thanks for the input on this, I thought it wasn't something too far fetched but wanted to make sure.

:D

stevebramley
29-06-2009, 04:57 PM
Patricktt did you get this sorted?

patricktt
29-06-2009, 05:32 PM
Actually I haven't yet, I need to finish it off this week.. are you facing the same issues or you have a solution?

stevebramley
30-06-2009, 08:57 AM
Hi Patricktt.

No i'm not but I used to get asked about this issue a lot. I'd start from minimal > up. Meaning coding your navigation to be open and then incrementally close it back down so that if everything's turned off (css, javascript etc) then your user has some chance of navigating your site (albeit in a world of ugly). My stages of escalation would be html > css > hover htc > jquery. The last stage would be to use jquery to remove any conflicting classes and structures implemented in earlier stages (like the htc) and implement an animateTo statement with a delay to keep your sub-nav elements open for your 2 second period.

I'm using a similar concept here (http://www.business.curtin.edu.au/business/teaching-areas/graduate-school-of-business/events-at-the-gsb/register-for-an-event) for keeping validation error notices open. if you type an incorrect value into the email field, the error message pops up and slowly fades away. if you hover over it, it'll animate to opaque again.


//jquery(you'd change the fade to a show/hide or slide function):
$(this).parent().find('.warning').hover(function() {
var $fade = $(this);
if ($fade.is(':animated')){
$fade.stop().fadeTo(500, '1.0');
} else {
$fade.fadeIn(500);
}
}, function() {
var $fade = $(this);
if ($fade.is(':animated')){
$fade.stop().fadeTo(6000,'0');
} else {
$fade.fadeOut(6000);
}
});