A LIST Apart: For People Who Make Websites

No. 183

Discuss: Dynamically Conjuring Drop-Down Navigation

Pages

 <  1 2 3 4 >

21 cawb

Interesting, didn’t know that. I just went through his script and saw what you mean: var y = document.getElementsByTagName(‘link’); var links = ‘’; for (var i=0;i<y.length;i++) { if (y[i].getAttribute(‘rel’) == ‘stylesheet’) continue; links += ‘ [url=”’ + y[i].getAttribute(‘href’) + ‘”]’ + y[i].getAttribute(‘rel’) + ‘[/url]’; } links += ‘
‘; links += ‘[url=”/home.html”]home[/url]’; links += ‘[url=”/sitemap.html”]sitemap[/url]’; links += ‘[url=”/contact.html”]contact[/url]’; links += ‘[url=”/about/copyright.html”]copyright[/url]’;

However, I was not aware of it and unless you read the “making of quirksmode” article on the site you wouldn’t be either. So let’s be a bit more careful assuming that some ideas were taken from somewhere else, shall we?

Personally I am not a big fan of writing out HTML without generating it via DOM, but that is just me.

posted at 02:04 am on June 18, 2004 by Chris

22 Why use this technique?

I have a website that must be accessible for non Javascript users, yet I want Javascript users to navigate the site usings a drop down menu (with Javascript redirection).

With this technique non-Javascript users do not have to see the (then useless) menu and only see the textual links I’ve placed in a noscript tag.

My concern: does it work in IE5 (DOM support) ?

posted at 04:01 am on June 19, 2004 by manu

23 manu

We are talking about two different things here. This technique is there to show accessibility enhancing LINK info for IE. A Javascript Navigation can be made accessible by simply making it non-dependent on Javascript but enhance it by it.

It works in IE5, you can test it by downloading the standalone IE5 versions out there on the web.
http://www.skyzyx.com/archives/000094.php

You can make a dropdown with javascript redirection accessible by applying the javascript onsubmit rather than onchange on the select. All you need is a Javascript fallback on the server side.
http://www.evolt.org/forms_javascript/

posted at 04:13 pm on June 19, 2004 by Chris

24 Nice

I’m posting from Northern Ireland right now so I won’t say too much…

Opera 7 already has this feature. But maybe you should use onchange for the form instead of a button.

posted at 01:29 pm on June 20, 2004 by Dante

25 Thanks for the geographical update

And yes, as stated “Some browsers use its data to show a toolbar — alas, the son of the giant of Redmond does not, and his followers are legion.”

posted at 04:30 am on June 21, 2004 by Chris

26 my condolences

1. some good ideas on using existing markup in other ways

2. every idea at ala (and elsewhere) is to be built upon and explored (it still humors me to see the ‘I already did that’ post, or ‘ I can do one better’… …that’s great…

but, man, sometimes these discussions make you not wanna write another article, huh?

so, nothing but thanks for your time and effort trying to help people.

[undisclosed location]
peace
z

posted at 02:29 pm on June 21, 2004 by zack

27 onsubmit rather than onchange

Dante, as pointed out by Chris, using onsubmit on a button rather than onchange on the drop-down menu is the accessible option. The reason for this is the browser will only go to get a page when the user confirms they want that to happen.

If the user had limited mobility with a pointing device they may accidentally change the drop-down menu to an option they actually do not want. Or, maybe the user is negotiating the drop-down menu using the keyboard: they would use arrow keys to select the option they want and would then tab to the submit button.

:-)

posted at 09:14 pm on June 22, 2004 by Lewis

28 Lewis

Cheers, that was the reason. It is negotiable though if users who rely on keyboard navigation don’t actually know that a dropdown onselect is accessible when you pressl alt+arrow down first to expand it and then choose by using arrow up and down and submitting with enter.

posted at 01:08 am on June 23, 2004 by Chris

29 Careful with excessive <link>s

Lynx, and maybe other text browsers, display the <link> links at the beginning of the document. If you include too many, it takes a long time to tab past them all to get to any links in the content.

A workaround is to make the first <link> point to an anchor at the beginning of the content, effectively skipping the <link> links.

My site uses next, prev, up and start “special” links extensively, with a “control bar” in the header to allow those without Opera/Mozilla to access them.

posted at 03:39 am on June 23, 2004 by Mark

30 Accessability

This is nice, but one problem is, that much BFUs don’t use drop-down list..or it is not effective way of navigation.

posted at 07:03 am on June 28, 2004 by PNDesign

Pages

 <  1 2 3 4 >

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Remember me

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)