How to control css pseudoclass hover effect

[MrBanabas]

Hi,

I ve got a css based menu system, which uses css hover pseudo class to
dynamically show submenus. That works perfect.

Now, I thought it might be a good idea to change the menu actions to
ajax requests to avoid reloading the menu for each menu action. That
is as well working perfect, but there is one little annoying issue.
The submenus are still shown after the ajax requests are completed.
I ve tried to hide them with prototype hide function on completion of
ajax request.
That one works, but has the negative side effect that the hover effect
is afterwards not working anymore.

Does anybody have an idea how to hide these submenus, which were
initially shown by css hover pseudoclass ??

Thanks a lot in advance.
Volker

 

[David Mark]

Hi,

I ve got a css based menu system, which uses css hover pseudo class to
dynamically show submenus. That works perfect.

I doubt it. Not that you have a CSS-based menu system, but that it is
flawless.

Now, I thought it might be a good idea to change the menu actions to
ajax requests to avoid reloading the menu for each menu action.

I don't know what that means.

That
is as well working perfect, but there is one little annoying issue.
Optimistic.

The submenus are still shown after the ajax requests are completed.

Trouble in paradise.

I ve tried to hide them with prototype hide function on completion of
ajax request.

Oops. Now I know you are being overly optimistic. Prototype?!

That one works, but has the negative side effect that the hover effect
is afterwards not working anymore.

That would be an annoyance.

Does anybody have an idea how to hide these submenus, which were
initially shown by css hover pseudoclass ??

Which submenus?

 

[MrBanabas]

Well, ok...

My menu system is a tree. Each menu item (leaf in my tree) triggers an
actions when the user click s on it. In case of non-leaf node I ve
defined a css hover pseudoclass to open the submenu for this node,
which is a list of direct children.
Let s take the firefox menubar as an example. Go to item View. The
submenu for view will be opened. Go to item Zoom and the zoom submenu
will be opened. Click on "Zoom in" an action will be triggered. and
the submenus will be invisible again. Just the menubar with the top
level nodes is visible.

In my web application that action is a simple html link, which means
the browser will send an http get request to my server which will
response with a new complete html page and the browser will render
that new page for the user. Due to that fact my menu bar will be in
the mode that no submenu is visible.

I ve asked myself, why should I reload a whole new html page. There
are parts in my webapplication such as my menubar which are static and
there is no need to reload it for every menu item action.
Therefore, I ve changed my menu action from "standard" html links to
ajax style html links, which will only update my html page and not
totally reload it.

Lets assume the menu bar of my web application has the same items as
firefox s menu bar.
The user clicks "zoom in". Page content gets updated, but the two
submenus are still open/visible.

I would like to know how I might hide them?

 

[Evertjan.]

Well, ok...

My menu system is a tree.

If you are answering someone in particular, please send an email.

This is usenet, so:
please always quote on usenet.

 

[David Mark]

Well, ok...

My menu system is a tree. Each menu item (leaf in my tree) triggers an
actions when the user click s on it. In case of non-leaf node I ve
defined a css hover pseudoclass to open the submenu for this node,
which is a list of direct children.
Okay.

Let s take the firefox menubar as an example. Go to item View. The
submenu for view will be opened. Go to item Zoom and the zoom submenu
will be opened. Click on "Zoom in" an action will be triggered. and
the submenus will be invisible again. Just the menubar with the top
level nodes is visible.

Cool! To think I'd live to see that in my lifetime.

In my web application that action is a simple html link, which means
the browser will send an http get request to my server which will
response with a new complete html page and the browser will render
that new page for the user. Due to that fact my menu bar will be in
the mode that no submenu is visible.

Um, you didn't makes Ajaxify your navigation did you?

I ve asked myself, why should I reload a whole new html page. There
are parts in my webapplication such as my menubar which are static and
there is no need to reload it for every menu item action.

You've just made the same mistake as virtually every other novice Web
developer for the last four years or so. Reload the menubar. Your
navigation will be faster. *Much* faster and with fewer server hits
(assuming the users know how to use the back and forward buttons,
while will remain thankfully unbroken.)

Therefore, I ve changed my menu action from "standard" html links to
ajax style html links, which will only update my html page and not
totally reload it.

Do not do that under any circumstances.

Lets assume the menu bar of my web application has the same items as
firefox s menu bar.
The user clicks "zoom in". Page content gets updated, but the two
submenus are still open/visible.

I would like to know how I might hide them?

Ajax is not for navigation. Write that 1,000 times. Open menus will
"hide" when the next document is rendered.

 

[MrBanabas]

Well, thanks a lot for your help, was nt an answer to my question and
I do not share your opinion, but that s life.