How to Do Collapsible Navigation Menus?

[David T. Ashley]

In my application, I'm going to have a navigation pane (i.e. frames) on the
left that links to pages that display in the main window. The list of
choices varies by user, but once a user logs in, it is always the same list.

I'm going to arrange this pane as a hierarchical list of headings,
subheadings, and links, i.e. something like:

Number Theory Tools
Euclid's GCD Algorithm
Continued Fraction Expansion of a Rational Number
LCM
Miller-Rabin Probable Primality Test
Calculation Tools
Arbitrary Expression Evaluation

Etc.

Because there will be so many choices, I'd like to have the ability to
collapse and uncollapse parts of the list, hierarchically. One should, for
example, be able to "collapse" the "Number Theory Tools" part of the list so
that only the heading shows, then uncollapse it later.

What is the best way to accomplish this?

Are there any clever tricks to avoid re-loading the left pane on each
collapse/expand?

Thanks.
--
David T. Ashley (dt*@e3ft.com)
http://www.e3ft.com (Consulting Home Page)
http://www.dtashley.com (Personal Home Page)
http://gpl.e3ft.com (GPL Publications and Projects)

[=?ISO-8859-15?Q?Iv=E1n_S=E1nchez_Ortega?=]

David T. Ashley wrote:

[...] I'd like to have the ability to collapse and uncollapse parts of the
list, hierarchically.[...]

What is the best way to accomplish this?

Use no-javascript, pure CSS, drop-down menus. There are a couple different
implementations on the web, so search for 'em.

Are there any clever tricks to avoid re-loading the left pane on each
collapse/expand?

Most of the "functionality" is on the .css file, that is cached and saves
bandwidth. And for the options, they are *all* in the HTML. Being <li>s,
the whole menu is pretty small.

--
----------------------------------
Iván Sánchez Ortega -ivansanchez-algarroba-escomposlinux-punto-org-

http://acm.asoc.fi.upm.es/~mr/ ; http://acm.asoc.fi.upm.es/~ivan/
MSN:i_*************************@hotmail.com
Jabber:iv*********@jabber.org ; iv*********@kdetalk.net

[Michael Fesser]

..oO(Iván Sánchez Ortega)

>David T. Ashley wrote:

>[...] I'd like to have the ability to collapse and uncollapse parts of the
list, hierarchically.[...]

What is the best way to accomplish this?

Use no-javascript, pure CSS, drop-down menus.

A properly built JS-based menu is usually more usable and accessible
than a CSS menu. You can implement keyboard navigation and timeouts, so
that the menu stays open for half a second or longer, even if the mouse
pointer leaves the hover area. With pure CSS that's impossible.

Micha

[David T. Ashley]

"Michael Fesser" <ne*****@gmx.dewrote in message
news:tk********************************@4ax.com...

.oO(Iván Sánchez Ortega)

>>David T. Ashley wrote:

>>[...] I'd like to have the ability to collapse and uncollapse parts of
the
list, hierarchically.[...]

What is the best way to accomplish this?

Use no-javascript, pure CSS, drop-down menus.

A properly built JS-based menu is usually more usable and accessible
than a CSS menu. You can implement keyboard navigation and timeouts, so
that the menu stays open for half a second or longer, even if the mouse
pointer leaves the hover area. With pure CSS that's impossible.

Micha

Thank you both. I did search the web and found things that are very similar
to what I want using JavaScript.

So, we're down to my next question ...

Can anyone recommend any books on JavaScript that are tailored for how to
write scripts for web browsers?

Thanks.

[=?ISO-8859-15?Q?Iv=E1n_S=E1nchez_Ortega?=]

David T. Ashley wrote:

Can anyone recommend any books on JavaScript that are tailored for how to
write scripts for web browsers?

Regardless of the book, I recommend developer.mozilla.com as a good
javascript *and* DOM object reference.

Oh, and try firebug for debugging purposes. Just great.

--
----------------------------------
Iván Sánchez Ortega -ivansanchez-algarroba-escomposlinux-punto-org-

Go to a movie tonight. Darkness becomes you.