I would also watch out for those with screen readers. Hearing a huge
list of links is not a nice idea.
Something which was recommended to me to allow screen readers a chance
to use navigation systems is to have a hidden link at the top of the
page which points to the navigation DIV. Put this DIV as far down the
page as possible, but use CSS to place it.
The idea here is that the page's content is FAR more important then
the navigation, no matter how pretty. If you are blind and accessing
the page via a screen reader, having no mechanism to either jump to
the content or to skip the navigation is a pain and one which will
instantly lose you a customer.
Considering the simplicity of the "fix", HAVING it will at least have
you perceived to care about those users who work the web differently
to you.
Also, embedded UL/LI is also awkward to navigate if non-seeing.
Level1
Level1.1
Level1.1.1
Level1.2
Level1.2.1
Level1.3
Level2
etc.
For listening to ...
Level1 (Jump to Level1.1)
Level2 (Actual page jump)
Level1.1 (Jump to Level1.1.1)
Level1.2 (Jump to Level1.2.1)
Level1.1.1 (Actual page jump)
Level1.2.1 (Actual page jump)
This is REALLY nice to hear. It is just like telephone banking.
And using CSS to style all of this is what makes it easier to work
with. I believe that you can nearly do all of this with no JS, but I'm
no expert!
Hopefully an interesting consideration for you all.
On 21/05/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
>
> Nick - that's nice code but not very friendly to non-js browsers. Be
> better to define the menu in a UL LI list then add the onclick events
> afterwards. Nice use of builder though! :)
>
> Ben
>
> On May 21, 3:56 pm, "Nicolas Terray" <[EMAIL PROTECTED]> wrote:
> > Here is an example (among many others)
> >
> > //The menu definition
> > var menu = [
> > {title: 'Fruits', entries: [
> > {title: 'Apple', entries: [
> > {title: 'Granny Smith'},
> > {title: 'Royal Gala'}
> > ]},
> > {title: 'Banana'}
> > ]},
> > {title: 'Vegetables', entries: [
> > {title: 'Broccoli'}
> > ]}
> > ];
> >
> > //Recursive function to build the menu
> > function get_menu(obj) {
> > var li = [obj.title];
> > if (obj.entries) {
> > li.push(Builder.node('ul',
> > obj.entries.collect(function(entry) {
> > return get_menu(entry); })));
> > }
> > return Builder.node('li', li);
> >
> > }
> >
> > //Build the menu
> > var ul = Builder.node('ul', menu.collect(function(entry) { return
> > get_menu(entry); }));
> >
> > //Add it to DOM
> > $('menu').appendChild(ul);
> >
> > On 5/21/07, Jon Trelfa <[EMAIL PROTECTED]> wrote:
> >
> > > In the past, I've used unordered lists with a recursive function to
> > > generate
> > > it. You could probably 'roll your own' and end up with about 10-25 lines
> > > of
> > > code depending on the complexity of the tree.
> >
> > > On 5/21/07, szimek <[EMAIL PROTECTED]> wrote:
> >
> > > > Thank you guys very much for all replies.
> >
> > > > I don't really need an ajax based menu - I need to fetch an xml or json
> > > > (I'll probably use json because it tends to create smaller files) file
> > > using
> > > > ajax and then use javascript to create a tree menu out of it. The files
> > > with
> > > > data can be pretty large, so I need simple xhtml structure that can be
> > > > created fast with javascript.
> >
> > > > I'll check other implementations first to see how it works, but probably
> > > > I'll have to write my own version anyway.
> >
> > > > Thanks again.
> > > > --
> > > > View this message in context:
> > >http://www.nabble.com/Prototype-based-tree-menu-tf3756726.html#a10718080
> > > > Sent from the RubyOnRails Spinoffs mailing list archive at Nabble.com.
>
>
> >
>
--
-----
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731
"Standing on the shoulders of some very clever giants!"
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
