navER

2009-Feb-15:  When looking for a menu-bar / nav-bar, the "Suckerfish" CSS dropdown menus came close to what I wanted.  However I wanted something that would work visually together with centered elements.  I also wanted something that was easily changed, without any laborious recalcaulation of widths.  Rather than simple centering, I found that I preferred to have it behave in the style of a justified paragraph (the distinction will become clear when considering a menu-bar needing multiple lines).  I abandoned doing it in CSS, and wrote some Javascript to do it.  The CSS is the work of others, part of the Javascript is too -- see the credits in the CSS and JS files.

Here is the CSS.

Here is the Javascript.

An example of a site using it  (resize your window while viewing it to appreciate the behaviour).

When upgrading my Opera-browser from version 9.63 to 10.11, I noticed that these suckerfish-based menus misbehave under Opera-10.11 -- the dropdowns fail to go away when they should, although they do on a Reload.  I'm not aware of any other browser having that problem, but will attempt to solve it for Opera-10.  These menus still work as desired in Firefox-1, Firefox-2, ie6 (under wine), ie7 (under wine).  They misbehave in Konquerer although in what appears to be an even worse case of the Firefox-3 problem, not the Opera-10 problem.

Shortly after my going to Opera-10.11 another new version, 10.60, became available, and I promptly upgraded to it.  However it's such a disaster that I feel forced to go back to an earlier version, and once going to that trouble it'll probably be just as easy to go back to 9.63 rather than to 10.11, and in that case getting these "suckerfish" menus working in Opera-10 may lose its urgency.  Googling for a solution wasn't fruitful; looks as though other people's suckerfish-style menus are working in Opera-10, in fact one person states that Opera-10 is the first version of Opera for which his work correctly.  Consider the alternate way of switching between dropdown showing vs hidden, as used in htmldog.com/articles/suckerfish/dropdowns.