By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,445 Members | 1,159 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,445 IT Pros & Developers. It's quick & easy.

Template or model for menuing

P: n/a
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
Jan 9 '08 #1
Share this Question
Share on Google+
14 Replies


P: n/a
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/

--
Berg
Jan 9 '08 #2

P: n/a
Wed, 09 Jan 2008 16:49:24 -0600 from Bergamot <be******@visi.com>:
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
Jan 9 '08 #3

P: n/a
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. See for yourself: http://www.alistapart.com/articles/dropdowns/

Gregor


--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Jan 10 '08 #4

P: n/a
rf

"Gregor Kofler" <us****@gregorkofler.atwrote in message
news:7a***************************@news.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.
Jan 10 '08 #5

P: n/a
Thu, 10 Jan 2008 01:46:58 GMT from rf <rf@invalid.com>:
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
Jan 13 '08 #6

P: n/a
rf wrote:
"Gregor Kofler" <us****@gregorkofler.atwrote in message
news:7a***************************@news.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
Jan 13 '08 #7

P: n/a
rf

"Ed Mullen" <ed@edmullen.netwrote in message
news:hM******************************@comcast.com. ..
rf wrote:
>"Gregor Kofler" <us****@gregorkofler.atwrote in message
news:7a***************************@news.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 </awill 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 </ais 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 <licontaining both a <aand 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.
Jan 14 '08 #8

P: n/a
rf wrote:
"Ed Mullen" <ed@edmullen.netwrote in message
news:hM******************************@comcast.com. ..
>rf wrote:
>>"Gregor Kofler" <us****@gregorkofler.atwrote in message
news:7a***************************@news.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 </awill 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 </ais 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 <licontaining both a <aand 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.
Jan 14 '08 #9

P: n/a
rf wrote:
"Ed Mullen" <ed@edmullen.netwrote in message
news:hM******************************@comcast.com. ..
>rf wrote:
>>"Gregor Kofler" <us****@gregorkofler.atwrote in message
news:7a***************************@news.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 </awill 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 </ais 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 <licontaining both a <aand 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?
Jan 15 '08 #10

P: n/a
rf

"Ed Mullen" <ed@edmullen.netwrote in message
news:5_******************************@comcast.com. ..
rf wrote:
>"Ed Mullen" <ed@edmullen.netwrote in message
news:hM******************************@comcast.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>.
<tableis one of these. The more semantcally correct <ulis not, so even
when using a <ulfor the sub menu it needs to be enclosed in a single
celled table.

2) A <ulworked 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 <licross 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).
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.
Why do we drive on parkways and park on driveways?
Same reason we initiate a Windows shutdown by clicking the start button?

--
Richard.
Jan 16 '08 #11

P: n/a
rf wrote:
"Ed Mullen" <ed@edmullen.netwrote in message
news:5_******************************@comcast.com. ..
>rf wrote:
>>"Ed Mullen" <ed@edmullen.netwrote in message
news:hM******************************@comcast.co m...
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>.
<tableis one of these. The more semantcally correct <ulis not, so even
when using a <ulfor the sub menu it needs to be enclosed in a single
celled table.

2) A <ulworked 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 <licross 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).
>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.
Thanks for the detailed reply, Richard. Much appreciated.

I understand your reasoning. In my case, my site is a non-commercial
one and is just a hobby. Hence, while mindful of the usability issues,
I'm not overly concerned with the rare visitor who might be using a
visual browser. I personally like multi-level menus since that's what
virtually all the programs on my Windows computer use, and I'm extremely
familiar with them. But, to each his own. I guess I'll take another
look at Stu Nicholls' menu system. But thanks again for your time and help!
>Why do we drive on parkways and park on driveways?

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

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
If a book about failures does not sell, is it a success?
Jan 16 '08 #12

P: n/a
On Jan 10, 1:46 am, "rf" <r...@invalid.comwrote:
"Gregor Kofler" <use...@gregorkofler.atwrote in message
news:7a***************************@news.inode.at.. .
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.
<nitpick>
11 validation errors
</nitpick>
--
AGw.
Jan 17 '08 #13

P: n/a
Thu, 17 Jan 2008 07:45:51 -0800 (PST) from AGw. (Usenet)
<fr*******@southernskies.co.uk>:
On Jan 10, 1:46 am, "rf" <r...@invalid.comwrote:
"Gregor Kofler" <use...@gregorkofler.atwrote in message
news:7a***************************@news.inode.at.. .
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.

<nitpick>
11 validation errors
</nitpick>
I beg to differ. That's not nitpicking, IMHO. I just assumed that
Gregor was offering valid HTML and CSS. If it's not, I don't want to
use it.

--
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
Jan 18 '08 #14

P: n/a
On Jan 18, 1:13 am, Stan Brown <the_stan_br...@fastmail.fmwrote:
Thu, 17 Jan 2008 07:45:51 -0800 (PST) from AGw. (Usenet)
<freder...@southernskies.co.uk>:
On Jan 10, 1:46 am, "rf" <r...@invalid.comwrote:
"Gregor Kofler" <use...@gregorkofler.atwrote in message
news:7a***************************@news.inode.at.. .
>
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.
<nitpick>
11 validation errors
</nitpick>

I beg to differ. That's not nitpicking, IMHO. I just assumed that
Gregor was offering valid HTML and CSS. If it's not, I don't want to
use it.
At quick glance the validation errors are quickly fixable, and neither
their existence nor their correction would interfere with the
operation of the code. Granted, I may have missed something obvious!

Incidentally, you've confused Gregor with Richard.
--
AGw.
Jan 18 '08 #15

This discussion thread is closed

Replies have been disabled for this discussion.