A LIST Apart: For People Who Make Websites

No. 183

Discuss: Dynamically Conjuring Drop-Down Navigation

Pages

 <  1 2 3 4 >

11 Why a dropdown list?

Why a dropdown list? Why not use an (un)ordered list in which the list items are good old hypertext links?

Also, don’t the 8 PHP search&replace;‘s make the script slow?

Using XML/XSLT here seems like a wonderful idea to me. An XML sitemap could easily be transformed into a series of LINK elements, as well as a normal list.

posted at 12:42 am on June 16, 2004 by amon-re

12 Many ways to rome

anon, yes, both valid points. I chose the dropdownnot to waste much screen estate. The regexp are not much of performance issue, after all, this is executed on the server.
As for PHP, again, this is a fallback, if you want to use any other technique, be my guest.

If you can use includes, you can store your link data in PHP in a database or associative array and automatically populate prev and next, too, by reading the current page name.

I used this technique in my unobtrusive Javascript course in case you want to see an example. I wanted users to go through it page by page, but have a chance to shortcut, should they come back later:
http://www.onlinetools.org/articles/unobtrusivejavascript/

posted at 01:31 am on June 16, 2004 by Chris

13 My 2 cents

No need for this script if you use Opera or Mozilla! They display the navigation bar for you to click on. Great idea though – you could have something big here. How about improving it way beyond what the aforementioned browsers can do?

posted at 04:58 am on June 16, 2004 by Chris Hester

14 Drop down nav useless - Site map better?

Drop down nav.

If you have 30+ pages on a website then a drop down list can be a bit hard to wade through. As navigation I don’t like drop down menu’s that much. They can be powerful in some instances though such as a links page. I use several drop downs on my own links page which loads pages into a frame. Quite handy there but not too useful for nav otherwise.

If you are going for a list all approach I think CSS/dhtml techniques are better and more usable I believe especially with sub menus.

Drop downs might be handy if you are using sub index pages where not all links are 1 click away but a simple site map page can do the same job whilst saving a lot of code on every page.

posted at 06:10 am on June 16, 2004 by Darren

15 Darren

true, and your point is? Again: This is not to replace a navigation of a web site, we talk about linked documents here, which have a common theme, much like tutorials and online books. LINK is not a navigation replacement, it is above the site navigation, a structural meta navigation.

posted at 06:16 am on June 16, 2004 by Chris

16 seems like bloat

if I have to type out all that js to render a two option dropdown it doesn’t seem very productive. I still can’t exactly tell where the ‘dynamic’ even comes into play after reading it 3x over ? anyone care to explain ?

How i’ve handled this problem is server-side using php. I read the directory I specify in and grab all files with a .html and dynamically generate a dropdown box on a loop using the list of contents from the dir scan. Now that is dynamic [and less lines of code than this JS in the article]…. and server side which leaves no chance of the user being able to interfere by turning a browser preference off.

posted at 05:09 pm on June 16, 2004 by D K

17 opps

I forgot to say that I see how it could be more useful from an accesibility standpoint but I don’t see the dynamic part ?

posted at 05:14 pm on June 16, 2004 by D K

18 D.K.

Well, kudos to you, you found yet another way to do the same.
I also take in your point about dynamic, as it is a misnomer in this case. The dynamic bit is the generation of the dropdown from data in the document, data that otherwise would only be there for clients that support LINK. IE for example does not use the link data we put in for anything, which means a lot of developers don’t even bother adding this data.

Dynamic in your sense means that the link data and the navigation gets generated for each document server side by reading all documents and also setting prev and next, which is exactly what you should do and is a great idea. This article, above all, was meant to raise awareness for the LINK element. Some of the original explanations and intensions got lost in the editing process though.

However, your point about “all these lines of code” you need to “type in”, is a meek one, as all you need to do is to call the script in the zip via ONE script tag. The script can also be done in 20 lines less, but is less legible and worse as a code example then.

posted at 05:55 pm on June 16, 2004 by Chris

19 Nice

Nice use of the LINK tag. I wish we could use more standard HTML elements than just the
“strangeset” IE implements. Maybe as IE becomes less used. I’ve got my Mom using Mozilla. It starts at home. Good job Chris.

posted at 08:38 pm on June 16, 2004 by pTer

20 www.quirksmode.org

Peter-Paul Koch has used this technique for some time on his own site to create a few unobtrusive links at the bottom of each page. He also uses his sitemap as the navigation for his entire site (in a frame not an SSI) using javascript to make it into a dhtml menu. His work should probably have been credited here, and is likely better written.

posted at 03:12 pm on June 17, 2004 by cawb

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?)