Re: [WSG] how to create nested links in a side-navigation
Thanks everybody! The Y'sUI is an excellent option; to style it with CSS also. Choosing Javascript makes it difficult if the user has it turned off. I think it was one of the WSG members who choosed also a good way, using CSS. It is the portableApps site on http://portableapps.com/apps/internet/browsers/portable_firefox I like the left-site-navigation. But therefor you normally have to make a compromise: using small letters. I am going to measure it :) All the best Soeren Ted Drake schrieb: Hi All As everyone knows, there are a million ways of coding the nested navigation schemes. The Son of Suckerfish is one method. Thierry K. has a more accessible version on tjkdesign: http://tjkdesign.com/articles/dropdown/default.asp . The latest version of the Yahoo User Interface Library also comes with a menu function that is worth looking at: http://developer.yahoo.com/yui/menu/ . Personally, I think it is too heavy and a bit clunky for a simple navigation with possibly one dropdown. But if you are working with something like the below list, it is a good idea. It was developed with keyboard and screen-reader users in mind. It's easy to use and can generate the lists dynamically or take static content. It also has the built in iframe hack for those dealing with IE6 z-index issues (scream!) You can see the libraries here: http://developer.yahoo.com/yui/ . If you are currently using the libraries, you should update your links to use the latest versions. They crew is constantly working to make it leaner, faster, and better. Ted Drake Yahoo! Tech - Tech Made Easy Member of the Yahoo! Accessibility Stakeholders Group Did you know: Fully justified text alignment is an accessibility problem for dyslexia. The random width word spacing makes it difficult to read. -Original Message- From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of Martin Heiden Sent: Friday, July 21, 2006 5:15 AM To: Soeren Mordhorst Subject: Re: [WSG] how to create nested links in a side-navigation Soeren, on Friday, July 21, 2006 at 10:20 wsg@webstandardsgroup.org wrote: For navigation on the right site I like to use a nested list. What is the best way to produce a nested list? Did I do the list below correct? Yes, your list is valid, but I think you intend it a bit different: h2Departments-Overview/h2 ul li 1 ul li 1.1 ul li 1.1.1 ul li 1.1.1.1 /li li 1.1.1.2 /li li 1.1.1.3 /li li 1.1.1.4 /li /ul /li li 1.1.2 /li li 1.1.3 /li li 1.1.4 /li /ul /li li 1.2 /li li 1.3 /li li 1.4 /li /ul /li li 2 /li li 3 /li li 4 /li /ul Does anybody has a suggestion of what style to use, so that it will be still usable and accessible, of course without JavaScript? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] how to create nested links in a side-navigation
Soeren,
on Friday, July 21, 2006 at 10:20 wsg@webstandardsgroup.org wrote:
For navigation on the right site I like to use a nested list.
What is the best way to produce a nested list?
Did I do the list below correct?
Yes, your list is valid, but I think you intend it a bit different:
h2Departments-Overview/h2
ul
li 1
ul
li 1.1
ul
li 1.1.1
ul
li 1.1.1.1 /li
li 1.1.1.2 /li
li 1.1.1.3 /li
li 1.1.1.4 /li
/ul
/li
li 1.1.2 /li
li 1.1.3 /li
li 1.1.4 /li
/ul
/li
li 1.2 /li
li 1.3 /li
li 1.4 /li
/ul
/li
li 2 /li
li 3 /li
li 4 /li
/ul
Does anybody has a suggestion of what style to use, so that it will be
still usable and accessible, of course without JavaScript?
If you want to show/hide parts of the nested list dynamically, I'd
suggest to implement it in JavaScript. With pure CSS-hovers you will
run into some usability issues. You should show the whole list by
default and hide some of the levels when the document has loaded. Like
that the navigation will be usable even if JavaScript is disabled.
There may be another way to initially hide all/some of the higher
levels and link the sections to index-pages on which the part of the
tree where the sections belongs to, is shown.
Think, the best way would be a hover-effect (a:hover), although I realy
do not like it, cause it will surely touch
the content! One problem is, that the complete opened list will stretch
too far in the horizontal, so that the navigation
has to be extreme wide, maybe 300 up to 400px, especially when using
0.85em for the size of letters.
I don't understand this one... The width depends on how you are going
to style the list and how you name the navigation items. You could use
a dynamic fly-out menu (which I wouldn't recommend) or something like
an accordion. It's up to you.
You can control the indentation of the nested lists too, that it
won't stretch too far.
To style the list, use the decendant selector:
ul {}
ul li {}
ul li ul {}
ul li ul li {}
ul li.open ul li {}
...
Make use of the inheritance as much as you can.
Much fun!
regards
Martin
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] how to create nested links in a side-navigation
Hi All As everyone knows, there are a million ways of coding the nested navigation schemes. The Son of Suckerfish is one method. Thierry K. has a more accessible version on tjkdesign: http://tjkdesign.com/articles/dropdown/default.asp . The latest version of the Yahoo User Interface Library also comes with a menu function that is worth looking at: http://developer.yahoo.com/yui/menu/ . Personally, I think it is too heavy and a bit clunky for a simple navigation with possibly one dropdown. But if you are working with something like the below list, it is a good idea. It was developed with keyboard and screen-reader users in mind. It's easy to use and can generate the lists dynamically or take static content. It also has the built in iframe hack for those dealing with IE6 z-index issues (scream!) You can see the libraries here: http://developer.yahoo.com/yui/ . If you are currently using the libraries, you should update your links to use the latest versions. They crew is constantly working to make it leaner, faster, and better. Ted Drake Yahoo! Tech - Tech Made Easy Member of the Yahoo! Accessibility Stakeholders Group Did you know: Fully justified text alignment is an accessibility problem for dyslexia. The random width word spacing makes it difficult to read. -Original Message- From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of Martin Heiden Sent: Friday, July 21, 2006 5:15 AM To: Soeren Mordhorst Subject: Re: [WSG] how to create nested links in a side-navigation Soeren, on Friday, July 21, 2006 at 10:20 wsg@webstandardsgroup.org wrote: For navigation on the right site I like to use a nested list. What is the best way to produce a nested list? Did I do the list below correct? Yes, your list is valid, but I think you intend it a bit different: h2Departments-Overview/h2 ul li 1 ul li 1.1 ul li 1.1.1 ul li 1.1.1.1 /li li 1.1.1.2 /li li 1.1.1.3 /li li 1.1.1.4 /li /ul /li li 1.1.2 /li li 1.1.3 /li li 1.1.4 /li /ul /li li 1.2 /li li 1.3 /li li 1.4 /li /ul /li li 2 /li li 3 /li li 4 /li /ul Does anybody has a suggestion of what style to use, so that it will be still usable and accessible, of course without JavaScript? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
