Complex Menus

[rhino]

I need to learn more about making two kinds of menus:
A. menus that have hierarchies of three or four levels
B. horizontal menus that have so many options that they are wider than the
available space

Can anyone direct me to articles, examples, or other resources illustrating
how to do this? I'd prefer to stay with CSS-only solutions but would
consider solutions that use Javascript if that is the only realistic way to
do what I want to do.

With respect to requirement A:

Occasionally, I have to present information that is fairly deeply nested
within a site. For example, on the site I'm currently developing, at the
highest level of the menu, I have an option entitled "Services". When the
user clicks on Services, they are supposed to get a menu, one of whose
options is "Newsletter s". When the user clicks on Newsletters, they should
get another menu that lists the years, e.g. 2007, 2008, 2009. When the user
clicks on the desired year, they should get a list of the issues of the
newsletter for that year; when they click on the desired issue, it gets
displayed for them. If the issue contains more than one page, they should be
able to use controls to get to "Next" and "Previous" pages.

With respect to requirement B:

Sometimes, there are a lot of options that logically belong on the same
horizontal menu and they simply don't fit on one line given the space
available. For example, given the twelve issues of a newsletter in the same
issue and even using a fairly small font for the tabs, the menu can be too
wide for the existing space. If the newsletter starts getting published more
frequently, there would be even more tabs. I assume that someone has figured
out how to make menus wrap nicely - like they do in My Computer/Properties
in Windows for example - in web pages.

--
Rhino

[Beauregard T. Shagnasty]

Re: Complex Menus

rhino wrote:

I need to learn more about making two kinds of menus:
A. menus that have hierarchies of three or four levels

I assume you are meaning "fly-out" menus. Be sure you hire a tester of
your prototype who has motor-control deficiencies. Four levels deep
would be difficult for someone without a disability. Personally, I don't
like them at all.

B. horizontal menus that have so many options that they are wider than the
available space

IMO, a horizontal menu shouldn't have any more than half a dozen items.
Use a vertical menu on the left if you can't keep it that narrow. Adding
"months" to a horizontal menu isn't a good idea.

Can anyone direct me to articles, examples, or other resources illustrating
how to do this? I'd prefer to stay with CSS-only solutions but would
consider solutions that use Javascript if that is the only realistic way to
do what I want to do.

Using separate menu files for groups of pages would be easy to do with
server-side processing. Plus one rather small CSS file.

Never depend on JavaScript to present a menu. ~10% of your visitors will
likely have it disabled or stripped by a corporate firewall.

--
-bts
-Friends don't let friends drive Windows

[dorayme]

Re: Complex Menus

In article <g1pbjj$bqo$1@n ews.datemas.de> ,
"rhino" <No.offline.con tact.please@ano nymous.comwrote :

I need to learn more about making two kinds of menus:
A. menus that have hierarchies of three or four levels
B. horizontal menus that have so many options that they are wider than the
available space

Before starting this, perhaps you might read the thread at ciwas called
"tab key and pseudo class selector

--
dorayme

[David Morris]

Re: Complex Menus

rhino wrote:

I need to learn more about making two kinds of menus:
A. menus that have hierarchies of three or four levels
B. horizontal menus that have so many options that they are wider than the
available space
>
Can anyone direct me to articles, examples, or other resources illustrating
how to do this? I'd prefer to stay with CSS-only solutions but would
consider solutions that use Javascript if that is the only realistic way to
do what I want to do.
>...

I have just done something like this (this being pure CSS menus) at <
http://www.netwiz.com.au/home.html >.

Some test pages which are still up at (though the menu links go nowhere):

< http://www.netwiz.com.au/testarea/testpage.htm xhtml 1.0

< http://www.netwiz.com.au/testarea/testpage2.htm html 4.01

testpage3.htm, testpage4.htm and testpage5.htm are somewhat broken trial
implementations to show non gif buttons. These links will probably be
gone in a month.

My inspirations were drawn mainly from Steve Gibson's GRC site <
http://www.grc.com/menudemo.htm >, and he has some links there you could
follow, though, I first thought about doing this when I saw <
http://meyerweb.com/eric/css/edge/popups/demo.html >

Following Steve, I consider my variation of this menu system (as opposed
to the specific images in it) as public domain. (I'll knock something
up to say this more clearly in a month or two), so feel free to grab the
CSS and use it. (It would be nice to link back if you do).

I managed to get it to pass the W3C css validator, and still have it
work in IE5.5, IE6, IE7, FF1.5 FF2.0, OP9.2, SF3.3 and the very latest
KQ, though with one or two hacks.

[dorayme]

Re: Complex Menus

In article <1212202252.634 598@angel.amnet .net.au>,
David Morris <dlmorrisDONTSP AM@netwizDONTSP AM.com.auwrote:

rhino wrote:

I need to learn more about making two kinds of menus:
A. menus that have hierarchies of three or four levels
B. horizontal menus that have so many options that they are wider than the
available space

Can anyone direct me to articles, examples, or other resources illustrating
how to do this? I'd prefer to stay with CSS-only solutions but would
consider solutions that use Javascript if that is the only realistic way to
do what I want to do.
>...

>
I have just done something like this (this being pure CSS menus) at <
http://www.netwiz.com.au/home.html >.

montel>why you need montel>

A couple of points: why is the "why you need montel" repeated at the
third level. And why is the third level visible when the mouse is not
even over "the product".

--
dorayme

[David Morris]

Re: Complex Menus

dorayme wrote:

>>
>I have just done something like this (this being pure CSS menus) at <
>http://www.netwiz.com.au/home.html >.

>
montel>why you need montel>
>
A couple of points: why is the "why you need montel" repeated at the
third level. And why is the third level visible when the mouse is not
even over "the product".
>

I repeated each parent <LIas the top child in case there was some
confusion over whether the parent link was actually a link. I thought
this might be especially problematic with the menu buttons. This is a
design decision which can be easily reversed if I so choose.

I didn't notice the third level menu item opening when not hovering over
product. I have to confess I did the most of the last half of the
development looking for the changes in IE (as that was the hardest to
get right). In IE this works as expected. It is probably a regression
problem which I will look into, though I am not convinced it detracts
too much from the overall effect -- and the fragility of CSS as this
level gives me some pause.

(As a side bar the actual content of the web page needs some serious
work - which where I do need to turn my focus).

[Beauregard T. Shagnasty]

Re: Complex Menus

David Morris wrote:

< http://www.netwiz.com.au/testarea/testpage.htm xhtml 1.0
>
< http://www.netwiz.com.au/testarea/testpage2.htm html 4.01

body
{
position: relative;
font-family:"Arial", verdana, arial, helvetica, sans-serif;
font-size:8pt;

8pt? I can't read it. Points are for printing.

See: http://tekrider.net/html/fontsize.php

You have arial listed twice, and should drop Verdana.

--
-bts
-Friends don't let friends drive Windows

[David Morris]

Re: Complex Menus

Beauregard T. Shagnasty wrote:

David Morris wrote:
font-family:"Arial", verdana, arial, helvetica, sans-serif;
font-size:8pt;
>
8pt? I can't read it. Points are for printing.
You have arial listed twice, and should drop Verdana.
>

Thankyou. I'll look into this. I don't buy the anti-Verdana argument or
the serifs are better argument if that is what you are saying. But the
sizing (where I can) and any redundancy should be fixed (in time).

[Beauregard T. Shagnasty]

Re: Complex Menus

David Morris wrote:

at < http://www.netwiz.com.au/home.html >.

Something else I notice. All of your pages have a form, which states,

"Comments on anything from spelling or grammar mistakes to technical or
aesthetic issues will be keenly received. Please include your e-mail
address -- you will receive an automatically generated acknowledgment
that your comment has been received. "

May I suggest that you not send auto-generated mail to the email address
one enters? This is a perfect vehicle for a spammer to use. He doesn't
even have to try to hack the form; he enters addresses from his list and
you send the spam for him.

On my sites, the form generates a confirmation page, showing what they
entered, but it only sends email to me (or my clients).

--
-bts
-Friends don't let friends drive Windows

[dorayme]

Re: Complex Menus

In article <1212204362.883 979@angel.amnet .net.au>,
David Morris <dlmorrisDONTSP AM@netwizDONTSP AM.com.auwrote:

dorayme wrote:

>
I have just done something like this (this being pure CSS menus) at <
http://www.netwiz.com.au/home.html >.

montel>why you need montel>

A couple of points: why is the "why you need montel" repeated at the
third level. And why is the third level visible when the mouse is not
even over "the product".

>
I repeated each parent <LIas the top child in case there was some
confusion over whether the parent link was actually a link. I thought
this might be especially problematic with the menu buttons. This is a
design decision which can be easily reversed if I so choose.
>
I didn't notice the third level menu item opening when not hovering over
product. I have to confess I did the most of the last half of the
development looking for the changes in IE (as that was the hardest to
get right). In IE this works as expected. It is probably a regression
problem which I will look into, though I am not convinced it detracts
too much from the overall effect -- and the fragility of CSS as this
level gives me some pause.
>
(As a side bar the actual content of the web page needs some serious
work - which where I do need to turn my focus).

OK. When you come to do the important work of main menu and local menus
on your page, I think you might find that your misgivings about many
level menus will be more easily given in to. You might consider then
making the drop down menu as little levelled as possible that is
consistent with true usefulness. Simplicity can often be a powerful
accessibility feature all on its little lonesome.

While navigating your menu system, even I fumbled about a bit. And I was
twice winner of my school yearly table tennis competition, also
billiards champ (alas, only runner up in snooker, because Zebedee beat
me twice in a row. Besides being brilliant in class, Zebedee was no good
at anything sporty but had this infuriating knack at snooker!).

Got to rush, I have a delicate brain operation to perform. I hope they
have Boji on the table... But Jukka Korpela will do instead while I am
still smarting about Zebedee beating me.

--
dorayme

[David Morris]

Re: Complex Menus

Beauregard T. Shagnasty wrote:

David Morris wrote:
>

>at < http://www.netwiz.com.au/home.html >.

>
Something else I notice. All of your pages have a form, which states,
>
"Comments on anything from spelling or grammar mistakes to technical or
aesthetic issues will be keenly received. Please include your e-mail
address -- you will receive an automatically generated acknowledgment
that your comment has been received. "
>
May I suggest that you not send auto-generated mail to the email address
one enters? This is a perfect vehicle for a spammer to use. He doesn't
even have to try to hack the form; he enters addresses from his list and
you send the spam for him.
>
On my sites, the form generates a confirmation page, showing what they
entered, but it only sends email to me (or my clients).
>

Separate issue, of course, though you make a good point. Strangely, the
spammers tend to use fake (and rather obviously so) emails addresses and
contain HTML links which I (try to) filter out. Since I stopped calling
the code comment.php a few months back the spam has dropped to zero (or
one if you count the joker the other day), so I suspect most of them are
botts in any case. Should I get a flood I'll probably just drop the
whole section as it is rather under utilized.

[Beauregard T. Shagnasty]

Re: Complex Menus

David Morris wrote:

Beauregard T. Shagnasty wrote:

>David Morris wrote:
> font-family:"Arial", verdana, arial, helvetica, sans-serif;
> font-size:8pt;
>>
>8pt? I can't read it. Points are for printing.
>You have arial listed twice, and should drop Verdana.

>
Thankyou. I'll look into this. I don't buy the anti-Verdana argument

So long as you set the size of it at 100%, go ahead and use Verdana. The
trouble stems from authors who look at it - 'tis a rather large font -
and set their base font size to something smaller because the Verdana
looked too large on their own monitors. Then those of us without Verdana
suffer with microsized substitute fonts.

or the serifs are better argument if that is what you are saying.

Didn't say anything about serifs.

But the sizing (where I can) and any redundancy should be fixed (in
time).

Yes, please and thank you.

--
-bts
-Friends don't let friends drive Windows

[Beauregard T. Shagnasty]

Re: Complex Menus

David Morris wrote:

Beauregard T. Shagnasty wrote:

>David Morris wrote:

>>at < http://www.netwiz.com.au/home.html >.

>>
>Something else I notice. All of your pages have a form, which
>states,
>>
>"Comments on anything from spelling or grammar mistakes to technical
>or aesthetic issues will be keenly received. Please include your
>e-mail address -- you will receive an automatically generated
>acknowledgme nt that your comment has been received. "
>>
>May I suggest that you not send auto-generated mail to the email
>address one enters? This is a perfect vehicle for a spammer to use.
>He doesn't even have to try to hack the form; he enters addresses
>from his list and you send the spam for him.
>>
>On my sites, the form generates a confirmation page, showing what
>they entered, but it only sends email to me (or my clients).
>>

Separate issue, of course, though you make a good point.

That's why I began with "Something else." :-)

Strangely, the spammers tend to use fake (and rather obviously so)
emails addresses

For themselves, yes. But your form allows them to (bot-wise) enter all
the *victim* addresses and send messages to *them*.

and contain HTML links which I (try to) filter out.

Filter also: cc: and href

.. so I suspect most of them are botts in any case.

That's what they do. They make a copy of your form and flood your server
with it. They do not actually _use_ your form, only your
post-processing.

--
-bts
-Friends don't let friends drive Windows

[David Morris]

Re: Complex Menus

Beauregard T. Shagnasty wrote:

>
Didn't say anything about serifs.

It was anticipatory. (The debate about verdana sometimes slips over into
that as well).

>

>But the sizing (where I can) and any redundancy should be fixed (in
>time).

>
Yes, please and thank you.
>

A pleasure.

[David Morris]

Re: Complex Menus

Beauregard T. Shagnasty wrote:

David Morris wrote:
>

>Beauregard T. Shagnasty wrote:

>>David Morris wrote:
>> font-family:"Arial", verdana, arial, helvetica, sans-serif;
>> font-size:8pt;
>>>
>>8pt? I can't read it. Points are for printing.
>>You have arial listed twice, and should drop Verdana.

>Thankyou. I'll look into this. I don't buy the anti-Verdana argument

>
So long as you set the size of it at 100%, go ahead and use Verdana. The
trouble stems from authors who look at it - 'tis a rather large font -
and set their base font size to something smaller because the Verdana
looked too large on their own monitors. Then those of us without Verdana
suffer with microsized substitute fonts.
>

The font sizing issue has been addressed by making the the web site and
the menu scalable (in the change font size sense) in all supported
browsers including IE.

I have not altered the testmenu pages, so the changes are only visible
on the main site: < http://www.netwiz.com.au/home.html >.