drop down nav menus

[Tim W]

I am making a three level nav menu for the first time. Technically it
will be something like this:
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html
but I was lloking through the comments on that site and reading how it
might not work in IE an how it might be bad for accessibility.

So what's the best solution for multi level nav?

Tim w

 

[dorayme]

I am making a three level nav menu for the first time. Technically it
will be something like this:
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html
but I was lloking through the comments on that site and reading how it
might not work in IE an how it might be bad for accessibility.

So what's the best solution for multi level nav?

The best solution generally? Given that you are going to have one? OK,
keep it as simple as possible not to exacerbate the troubles and
confusions people have with them. This means keep to one level down,
make the head a link that goes to pages where the levels below it are
displayed as a local navigation for that section. If you cannot come
at this, keep to two levels down. And generally, for any n level menu
you wish for, make an effort to have n-1 to ameliorate the annoyance
that many people have with them.

If you do these things, most browsers will be good for your site. The
css drop down methods sometimes need to employ a little javascript to
kick older IE into action. And, if you want, put or link to such js
code by conditional comments that are only read by the older IE
browsers.

The point of making the head of a dropdown a link really means that
you do not really have to worry at all if the dropdown does not work,
the user will get by just fine (if not better even!)

 

[Tim W]

The best solution generally? Given that you are going to have one? OK,
keep it as simple as possible not to exacerbate the troubles and
confusions people have with them. This means keep to one level down,
make the head a link that goes to pages where the levels below it are
displayed as a local navigation for that section. If you cannot come
at this, keep to two levels down. And generally, for any n level menu
you wish for, make an effort to have n-1 to ameliorate the annoyance
that many people have with them.

If you do these things, most browsers will be good for your site. The
css drop down methods sometimes need to employ a little javascript to
kick older IE into action. And, if you want, put or link to such js
code by conditional comments that are only read by the older IE
browsers.

The point of making the head of a dropdown a link really means that
you do not really have to worry at all if the dropdown does not work,
the user will get by just fine (if not better even!)

Hmm, yes. I was looking at the BBC site today: four or five levels of
navigation without any dropdowns or fly-outs anywhere. I presume it
reflects a commitment to accessiblity. It is good.

tim W

 

[Joy Beeson]

I know, it is
not completely simple advice to follow and requires judgment.

One could usefully post that sentence in every newsgroup I frequent!

 

[dorayme]

Hmm, yes. I was looking at the BBC site today: four or five levels of
navigation without any dropdowns or fly-outs anywhere. I presume it
reflects a commitment to accessiblity. It is good.

It is probably the case that eschewing dropdown menus helps
concentrate the author's mind into making a decent navigation system
(with logical categories, highly focused local menus at every turn).
Now and then various ones of us can find dropdowns useful and help us
access. I find useful the ones at

<http://www.modelflight.com.au/>

for example, because I am forever looking (and sometimes buying
machines and parts) at remote control helicopter sites. I know what I
am looking for mostly and it is a bit quicker for me rather than to
traverse via simple links and local menus. But it might not be for
others! And the gain would be risky for the author of the site had he
or she not also made the heads of the dropdowns links and had local
menus.

On sites I have made, I have sometimes used dropdown menus but
followed the principles outlined. I will tend not to use them except
on the biggest of sites. If the dropdowns are simple and bold and not
in flyspeck text sizes, there is nothing to say *never* use them. Just
have a rule that it does not affect usability if they don't work.

An anecdote: dropdown menus mainly powered by CSS, when IE6 especially
was a browser to take account of, needed a bit of javascript to fill
in for its CSS failings. For some reason the javascript did not do the
trick on one of my sites and I could not easily find out why. But I
was pleased that this not did not matter because the navigation system
(acting with single links and local menus) worked well. It even made
me resolve not to help out with js in future for older browsers. But
the important point is that it did not matter critically.

If you want my opinion about whether to have them or not, I would say
this: design your site first without them and add them as an
afterthought if the extra would benefit significant numbers of people
and not disadvantage those who have trouble with them. I know, it is
not completely simple advice to follow and requires judgment.

 

[dorayme]

One could usefully post that sentence in every newsgroup I frequent!

There is a simple component in it that required no judgement, and that
is to completely design the site with no dropdown first and *then*
consider to modify to *add* some dropdown capabilities.

 

[richard]

The best solution generally? Given that you are going to have one? OK,
keep it as simple as possible not to exacerbate the troubles and
confusions people have with them. This means keep to one level down,
make the head a link that goes to pages where the levels below it are
displayed as a local navigation for that section. If you cannot come
at this, keep to two levels down. And generally, for any n level menu
you wish for, make an effort to have n-1 to ameliorate the annoyance
that many people have with them.

If you do these things, most browsers will be good for your site. The
css drop down methods sometimes need to employ a little javascript to
kick older IE into action. And, if you want, put or link to such js
code by conditional comments that are only read by the older IE
browsers.

The point of making the head of a dropdown a link really means that
you do not really have to worry at all if the dropdown does not work,
the user will get by just fine (if not better even!)

The problem has always been, IE, Like AOL, has its own little world.
IE has never played by the rules.
what works in 20 other browsers, fails in IE.

I have always had the attitude, that I'm not gonna write a web page just to
make 1 out of 50 browsers happy.
From the statistics on my site anyway, the vast majority of MY visitors use
anything BUT IE.

You have ten guys standing in a line doing the same excercise.
9 are in sync, while 1 is not.
the 1 says, "Why don't you guys get in the program?".

And then, I have been known to go against the grain myself a time or two.

 

[richard]

I am making a three level nav menu for the first time. Technically it
will be something like this:
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html
but I was lloking through the comments on that site and reading how it
might not work in IE an how it might be bad for accessibility.

So what's the best solution for multi level nav?

Tim w

Most interesting.
THe menu worked fine for me in IE, but in FF, nothing.