[thelist] Re: [CSS-Javascript] can "son of suckerfish" be implemented with timeouts?

VOLKAN ÖZÇELİK volkan.ozcelik at gmail.com
Mon May 2 17:36:12 CDT 2005

Since no reply, I'll try to tell my humble final thoughts on the subject:

I decided that a pure css menu is not perfect from the usability point of view. 

Since it is stateless, it disappears all of a sudden when the cursor
goes out of it.
One may argue that, you can make the menu not dissappear by tabbing
rather than using the mouse pointer. But if I can use my pointer to
reach the menu item, why on earth should I tab a thousand times to
reach the proper menu element?

A slight timeout between menu show and menu hide makes things a lot
better. And if a timeout is reuquired, imho, it's better to do it with
good old dhtml menu style rather than css, giving javascript full
control as per the dropdown and timeout effects.

Let css do what it is supposed to do, layout and formatting; and let
js do what it does best, state preservation and synchronization.


I've created a brand new menu from scratch. I've implemented a hybrid
menu by attaching event listeners to document.onmouseover, and
document.onfocus. The dropdown effects are controlled by js, and the
style of the nested unordered list is controlled by css. I'm gonna
share it with you when I test the code 100%.

As I mentioned; my conclusion is; it's better to get the best of both
worlds: Relying too much on js, applying non-necessary -and often
ie-specific- transition impacts load time,
relying on pure css impacts usability (if one does not have a good
hand-eye coordination, an immediate dissapearing of the css-only menu
will be really annoying for him.).


On 5/2/05, VOLKAN ÖZÇELİK <volkan.ozcelik at gmail.com> wrote:
> Hi folks,
> I know it is totally against the spirit of it, but I thought it woud
> be nice if suckerfish menu had a little timeout between its menu
> openings.
> I've tried to implement a solution. But after playing with the code
> for about  3-4 hours, I realized that it is harder than I first
> thought. When I add bits and pieces to the code, my logic turned into
> a more and more complicated piece of spagethi. A few minutes ago, I
> was uttering something like:
> "what if I hide all child nodes of the li's which are on the same
> level of my li and clear all the prescheduled timeout threads which
> are going to show sub menus, when I mouse over (or focus) on it and
> when I mouse ot (or blur) .. blah blah blah."
> At which time, I realized that I've lost my control over the code. I
> feel like I'm alone in a large rafting boat jumping over the waves in
> an angry river :)
> Here's the link, which can give you an idea of what I'm trying to achieve:
> http://www.sarmal.com/testcase/suckerfish_timeout.html
> (Sorry for the messy source.
> I've not deleted the commented out code, I thought it may give some
> hint on what I've tried apriori.
> The code is ie-specific. But it can be easily made cross-browser, just
> my laziness.
> When you hover the links, the items will open with 1.5 seconds delay)
> As you may guess the code is incomplete. Else I would be screaming
> "Eurika!" and  sharing my pleasure with you.
> My challange is that; can this menu be made behave like
> http://www.htmldog.com/articles/suckerfish/dropdowns/example/
> with timeouts of course.
> Is there an elegant solution to it. Or is it time to raise the white flag?
> Cheers,
> Volkan.

More information about the thelist mailing list