4 replies [Last post]
sanch3x
Offline
Enthusiast
Last seen: 9 years 29 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

Hey,

I am thinking of making a navbar with a list that extends/collapses when you click on an element to show the sub categories. I've seen it done before but I have no idea how it's made.

The only way I know it *could* be done would be with php but that's not dynamic so I wouldn't recommend it to someone else therefore I don't feel like using it myself.

How can I make one of these without having to reload the page. And if it's possible/feasible is it difficult to do? Is it accessible?

Thanks

[edit] In case I wasn't clear I'll try and type in an example:

Link 1
Link 2
Link 3

*user clicks on Link 1*

Link 1
+hotdogs
+hamburgers
+veggie-tofu-soya-stuff
Link2
Link3

[/edit]

Seb

"Don't worry about Blank let me worry about Blank"

Tags:
HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 10 years 51 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Collapsing list for a navbar

I presume you mean a click on list like a file tree thing rather than a straight suckerfish type dropdown menu - in which case have a look at this: http://www.thebownes.com/dennis/playground/dhtml/hide-show-div-onClick.html

Alternatively if it was the hover/dropdown menu thing that you're after then you want: http://www.htmldog.com/articles/suckerfish/dropdowns/

or http://www.positioniseverything.net/css-dropdowns.html

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

sanch3x
Offline
Enthusiast
Last seen: 9 years 29 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

Collapsing list for a navbar

The first example was interesting, in fact it's exactly what I'm looking for. Was that made in CSS? The only problem I have with javascript is that it might not be accessible and my department is currently redesigning the site (or I should say I'm redesigning it for the department) because the old site had failed all tests regarding accessibility.

I was reading the suckerfish article earlier and I'm trying to get into it since my knowledge of javascript is rather limited but being a second year softie eng student I figure I can manage.

Thanks

Seb

"Don't worry about Blank let me worry about Blank"

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 10 years 51 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Collapsing list for a navbar

To get either of these working in all browsers you'll need a bit of JS I'm afraid (principally for IE I believe).

The first example is accessible in that you can access the expanded div via tabbing and clicking Enter - so it's not restricted to mouse input. But if JS is switched off the links won't work.

There's this horizontal drop-down menu which uses absolutely no JS:

http://www.tjkdesign.com/articles/dropdown/demo.asp

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Bluesman
Offline
newbie
Last seen: 13 years 47 weeks ago
Joined: 2005-05-31
Posts: 5
Points: 0

Collapsing list for a navbar

This one also requires some javascript, but is very nice looking:

http://www.gazingus.org/html/DOM-Scripted_Lists_Revisited.html#