Template or model for menuing

#1

I posted over the holidays, but I venture to repost since there were
no responses. Maybe people overlooked my article among all the
excitement.

I'm looking for a template or model for menus that drop down when the
mouse hovers over them. Criteria: must work without JS, even in IE,
must degrade acceptably in non-CSS browsers, must not be sized in
pixels.

Here's what I posted a couple of weeks ago:

For some time now, I've been wanting to improve the look of the menus
at my site http://www.tc3.edu/instruct/sbrown/stat/ . I like way
these two work, opening a submenu when hovering on a selection:

http://www.cssplay.co.uk/menus/simple_vertical.html

http://www.grc.com/menu2/invitro.htm

They are pure CSS with no JS (even for MSIE 5 and 6). And they
degrade acceptably in a non-CSS browser like Lynx. But both are set
up in pixels -- the second one even uses images instead of text for
the top-level menu.

I've had no luck with Google, and it seems like an awful lot of work
to back-convert all the pixels to ems and fuss with the positioning.
Does anyone know where I can find the Holy Grail of menuing, a setup
that works in IE5(*) through IE7 as well as real browsers, without JS
and without fixed pixel dimensions?

(*) If necessary, I can live without IE5 compatibility.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

#2

Stan Brown wrote:

Quote:

I'm looking for a template or model for menus that drop down when the
mouse hovers over them. Criteria: must work without JS, even in IE,
must degrade acceptably in non-CSS browsers, must not be sized in
pixels.

You might want to look at the Brothercake menu
http://www.brothercake.com/dropdown/

--
Berg

#3

Wed, 09 Jan 2008 16:49:24 -0600 from Bergamot <bergamot (AT) visi (DOT) com>:

Quote:

Stan Brown wrote:

I'm looking for a template or model for menus that drop down when the
mouse hovers over them. Criteria: must work without JS, even in IE,
must degrade acceptably in non-CSS browsers, must not be sized in
pixels.

You might want to look at the Brothercake menu
http://www.brothercake.com/dropdown/

Thanks for the suggestion, but they don't seem to work for me with
Javascript turned off. (I didn't try them with Javascript turned on.)

The demo at http://www.udm4.com/demos/expanding-multiple.php did not
open up even one level below the top level.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

#4

"Gregor Kofler" <usenet (AT) gregorkofler (DOT) at> wrote

Quote:

Stan Brown meinte:

must work without JS, even in IE,

I suppose that's pretty impossible. If you're talking about IE6 or
earlier.

Anyway, "dropdown menus for ie without javascript" gives me 106.000 hits.
Still, I don't think there is a pure-css-and-ie6-too version among them.

Here's one:
http://barefile.com.au/cssmenu/

Even supports IE5.5.

--
Richard.

#5

Thu, 10 Jan 2008 01:46:58 GMT from rf <rf (AT) invalid (DOT) com>:

Quote:

Here's one:
http://barefile.com.au/cssmenu/

Even supports IE5.5.

Thanks!

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

#6

rf wrote:

Quote:

"Gregor Kofler" <usenet (AT) gregorkofler (DOT) at> wrote in message
news:7a3ee$4785667d$557fb479$17585 (AT) news (DOT) inode.at...
Stan Brown meinte:

must work without JS, even in IE,
I suppose that's pretty impossible. If you're talking about IE6 or
earlier.

Anyway, "dropdown menus for ie without javascript" gives me 106.000 hits.
Still, I don't think there is a pure-css-and-ie6-too version among them.

Here's one:
http://barefile.com.au/cssmenu/

Even supports IE5.5.

Richard, that looks very interesting!

Do you have anything written up that explains the techniques you used?
Specifically, examining the HTML/CSS I'm wondering about the structure
of the second and third menu items from the left.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
I have no choice but to believe in free will. - Randy Wayne White

#7

"Ed Mullen" <ed (AT) edmullen (DOT) net> wrote

Quote:

rf wrote:
"Gregor Kofler" <usenet (AT) gregorkofler (DOT) at> wrote in message
news:7a3ee$4785667d$557fb479$17585 (AT) news (DOT) inode.at...
Stan Brown meinte:

must work without JS, even in IE,
I suppose that's pretty impossible. If you're talking about IE6 or
earlier.

Anyway, "dropdown menus for ie without javascript" gives me 106.000
hits. Still, I don't think there is a pure-css-and-ie6-too version among
them.

Here's one:
http://barefile.com.au/cssmenu/

Even supports IE5.5.

Richard, that looks very interesting!

Do you have anything written up that explains the techniques you used?

Not as yet. I just pulled it out of one of my CMS's in answer to a post a
few weeks ago.

Quote:

Specifically, examining the HTML/CSS I'm wondering about the structure of
the second and third menu items from the left.

Nothing very dramatic. The sub-menu is in a table, initially hidden and
positioned absolutely in its (relatively positioned) parent. The conditional
comments determine what HTML each browser sees.

Specifically:
</a>
The </a> will be seen by IE7 (and above) because of the conditional
comments, and all non-IE browsers who correctly parse away the comments.
This method is explained on Microsofts site, it's kind of a reverse
conditional comment.


The </a> is only seen by IE 6 and below.

As for the menu:

IE6 and below see a <li> (the top level item) containing a <a> _which
contains the table_. Visibility of the table is controlled by .nav a:hover
table. This is of course invalid HTML but who cares, we are throwing it only
at IE6 and below and they seem quite happy with it.

All other browsers see a <li> containing both a <a> and the table, with the
table _following_ the <a>. Visibility of the table is controlled by .nav
li:hover table.

Note there is a bit of fluff in the HTML to allow the CMS to apply differing
effects to the menu.

--
Richard.

#8

rf wrote:

Quote:

"Ed Mullen" <ed (AT) edmullen (DOT) net> wrote in message
news:hM6dnYFHftqx8hfanZ2dnUVZ_vmlnZ2d (AT) comcast (DOT) com...
rf wrote:
"Gregor Kofler" <usenet (AT) gregorkofler (DOT) at> wrote in message
news:7a3ee$4785667d$557fb479$17585 (AT) news (DOT) inode.at...
Stan Brown meinte:

must work without JS, even in IE,
I suppose that's pretty impossible. If you're talking about IE6 or
earlier.

Anyway, "dropdown menus for ie without javascript" gives me 106.000
hits. Still, I don't think there is a pure-css-and-ie6-too version among
them.
Here's one:
http://barefile.com.au/cssmenu/

Even supports IE5.5.

Richard, that looks very interesting!

Do you have anything written up that explains the techniques you used?

Not as yet. I just pulled it out of one of my CMS's in answer to a post a
few weeks ago.

Specifically, examining the HTML/CSS I'm wondering about the structure of
the second and third menu items from the left.

Nothing very dramatic. The sub-menu is in a table, initially hidden and
positioned absolutely in its (relatively positioned) parent. The conditional
comments determine what HTML each browser sees.

Specifically:
!--[if gt IE 6]><!--></a><!--<![endif]--
The </a> will be seen by IE7 (and above) because of the conditional
comments, and all non-IE browsers who correctly parse away the comments.
This method is explained on Microsofts site, it's kind of a reverse
conditional comment.

!--[if lte IE 6]></a><![endif]--
The </a> is only seen by IE 6 and below.

As for the menu:

IE6 and below see a <li> (the top level item) containing a <a> _which
contains the table_. Visibility of the table is controlled by .nav a:hover
table. This is of course invalid HTML but who cares, we are throwing it only
at IE6 and below and they seem quite happy with it.

All other browsers see a <li> containing both a <a> and the table, with the
table _following_ the <a>. Visibility of the table is controlled by .nav
li:hover table.

Note there is a bit of fluff in the HTML to allow the CMS to apply differing
effects to the menu.

Thanks very much. I'll study this later on. I had the same issue as
Stan who posted the original question. This looks like a very promising
solution!

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Animal testing is a bad idea - they get nervous and give the wrong answers.

#9

rf wrote:

Quote:

"Ed Mullen" <ed (AT) edmullen (DOT) net> wrote in message
news:hM6dnYFHftqx8hfanZ2dnUVZ_vmlnZ2d (AT) comcast (DOT) com...
rf wrote:
"Gregor Kofler" <usenet (AT) gregorkofler (DOT) at> wrote in message
news:7a3ee$4785667d$557fb479$17585 (AT) news (DOT) inode.at...
Stan Brown meinte:

must work without JS, even in IE,
I suppose that's pretty impossible. If you're talking about IE6 or
earlier.

Anyway, "dropdown menus for ie without javascript" gives me 106.000
hits. Still, I don't think there is a pure-css-and-ie6-too version among
them.
Here's one:
http://barefile.com.au/cssmenu/

Even supports IE5.5.

Richard, that looks very interesting!

Do you have anything written up that explains the techniques you used?

Not as yet. I just pulled it out of one of my CMS's in answer to a post a
few weeks ago.

Specifically, examining the HTML/CSS I'm wondering about the structure of
the second and third menu items from the left.

Nothing very dramatic. The sub-menu is in a table, initially hidden and
positioned absolutely in its (relatively positioned) parent. The conditional
comments determine what HTML each browser sees.

Specifically:
!--[if gt IE 6]><!--></a><!--<![endif]--
The </a> will be seen by IE7 (and above) because of the conditional
comments, and all non-IE browsers who correctly parse away the comments.
This method is explained on Microsofts site, it's kind of a reverse
conditional comment.

!--[if lte IE 6]></a><![endif]--
The </a> is only seen by IE 6 and below.

As for the menu:

IE6 and below see a <li> (the top level item) containing a <a> _which
contains the table_. Visibility of the table is controlled by .nav a:hover
table. This is of course invalid HTML but who cares, we are throwing it only
at IE6 and below and they seem quite happy with it.

All other browsers see a <li> containing both a <a> and the table, with the
table _following_ the <a>. Visibility of the table is controlled by .nav
li:hover table.

Note there is a bit of fluff in the HTML to allow the CMS to apply differing
effects to the menu.

Thanks again for this, Richard.

Ok, I've been spending some time on it and I have a couple of questions.

1. Why use a table for the menu items? As opposed to list items, for
example?

2. Do you have an example of this scheme which implements additional
sub-levels?

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Why do we drive on parkways and park on driveways?

#10

"Ed Mullen" <ed (AT) edmullen (DOT) net> wrote

Quote:

rf wrote:
"Ed Mullen" <ed (AT) edmullen (DOT) net> wrote in message
news:hM6dnYFHftqx8hfanZ2dnUVZ_vmlnZ2d (AT) comcast (DOT) com...
rf wrote:

http://barefile.com.au/cssmenu/

Thanks again for this, Richard.

Ok, I've been spending some time on it and I have a couple of questions.

1. Why use a table for the menu items? As opposed to list items, for
example?

Hmmm. Been a while.

1) IE6 will only play nicely with this for a few elements within the <a>.
<table> is one of these. The more semantcally correct <ul> is not, so even
when using a <ul> for the sub menu it needs to be enclosed in a single
celled table.

2) A <ul> worked for me with some of the simpler layouts (top flat seperate
IIRC) (in a single celled table for IE6) but with the more complex ones I
had one hell of a time with selecting the appropriate <li> cross browser. It
became so annoying that I reverted to using a table (which nees to be there
for IE6 anyway). May not be "correct" but it works and is a case IMHO of
simply reaching for the hammer when every screwdriver to hand will not drive
the screw in. With some perserverance it could probably be done with list
items but I really could not justify spending any more time on it. If you
only want something simple (and not multi-design as mine is) then go for a
list (inside a table for IE6).

Quote:

2. Do you have an example of this scheme which implements additional
sub-levels?

It could probably be extended to multi level but I did not for several
reasons.

Even one level of drop down is getting to be a bit of an accessibility
problem. The dropdown is only usable with visual browsers and then only with
a pointing device. (note, my top level menu items are *always* links
themselves, pointing to an intermediate page containing all the "dropdown"
links in a secondary menu bar. This makes the system usable from the
keyboard). A second level of dropdowns would be IMO overkill. I dislike them
myself when I find them on web sites in the wild.

Positioning possible second level dropdowns is a big problem. The menus size
themselves to their content so we don't know where the right hand side of
the dropdowns is, so we don't know where to position the second level
dropdown. This could be fixed by fixing the size of the dropdowns but that
is not part of my design.

Quote:

Why do we drive on parkways and park on driveways?

Same reason we initiate a Windows shutdown by clicking the start button?

--
Richard.