RE: [WSG] Toggle L2 menu items (within WCAG)

[Thierry Koblentz]

> On Behalf Of Simon Cockayne
>
> I've started down the rod of using DOM scripting...to remove the L2 items
>  when the page loads and then toggle there addition/removal when a L1 item
> is clickedbut the JS is getting complicated...trying to support IE and
> Firefox. 

> Is there a CSS way that can:

> A) Show ALL items of CSS is no supported (for WCAG).
> B) NOT impact SEO.

These are two different approaches (both keyboard-friendly and "unobtrusive"):
JS:
http://tjkdesign.com/articles/TJK_SlideMenu/TJK_SlideMENU.asp 
CSS:
http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp

HTH,
-- 
Regards,
Thierry | http://www.TJKDesign.com






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Toggle L2 menu items (within WCAG)

[Anders Nawroth]

Kit Grose skrev:

JonMarc,

It sounds to me like he's referring more to a tree layout than a 
drop-down menu.


When it comes to tree menus, I'll add this to the list:
http://treemenu.nornix.com/

Standards compliant, keyboard friendly and more ... written by me.

/andersN



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] Toggle L2 menu items (within WCAG)

[Frank Palinkas]

Hi Simon,

 

I’m working on a similar issue using unobtrusive DOM/JavaScript to produce
the expand/collapse effect of nested unordered list items in a navigation
tree structure. This method (related containers) allows activation by both
mouse and keyboard, and the expanded nested list items remain open until
collapsed by the user. All DOM/Javascript is external to the structure layer
of the web page, along with event handlers and presentation layer styles. Gez
Lemon, from The Paciello Group (hi Steve), was instrumental in helping me get
the DOM/JavaScript sorted out – he is absolutely brilliant. There is still
some work to do on it, but the initial behavior layer is working properly.
This is definitely not the only way to accomplish this, but I thought It may
add to the suggestions being made by other list members. I can email you a
small zipped sample project folder for your inspection and possible use, if
you feel this may help. Please let me know?

 

Kind regards,

Frank M. Palinkas
Microsoft M.V.P. - Windows Help

W3C HTML Working Group (H.T.M.L.W.G.) - Invited Expert

M.C.P., M.C.T., M.C.S.E., M.C.D.B.A., A+   

Senior Technical Communicator 

Web Standards & Accessibility Designer 

 

From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Simon Cockayne
Sent: Sunday, 28 October, 2007 22:10 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] Toggle L2 menu items (within WCAG)

 

Hi,

I am using an  to store "level 1" menu items , each of which directs
to a page representing a topic.

I know have a requirement to add in "level 2" menu items (zero or more
beneath each L1 menu item", when user clicks(selects) an L1 menu, the L2
options should become visible. 

Home
   Bio 
   Research
   Teaching 
  
 Classes 
 Cases
  
   
   Links 
 


I've started down the rod of using DOM scripting...to remove the L2 items
when the page loads and then toggle there addition/removal when a L1 item is
clickedbut the JS is getting complicated...trying to support IE and
Firefox. 

Is there a CSS way that can:

A) Show ALL items of CSS is no supported (for WCAG).
B) NOT impact SEO.

Cheers,

Simon

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Toggle L2 menu items (within WCAG)

[Kit Grose]

JonMarc,

It sounds to me like he's referring more to a tree layout than a drop- 
down menu.


If that's the case, it's exactly what I'm researching at the current  
time, so I have a few good links you might like to visit (all use  
JavaScript; CSS can't handle 'clicks' natively with any sort of  
control):


This is quite an old example, but it's worked well for me in the  
past. Completely unobtrusive, but requires an initiation call to a  
specific ID:

http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

This one is quite nice, but needs some CSS work:
http://krijnhoetmer.nl/stuff/javascript/list-treeview-menu/

This one is great and very small (looks like it'll be the one I'll be  
using soon):

http://www.silverstripe.com/tree-control/

If you're already using jQuery, this one looks like a good idea (but  
obviously requires the jQuery library):

http://jquery.bassistance.de/treeview/

YUI includes its own but it is by no means SEO compatible. This one  
is an attempt to modify it so it doesn't affect SEO:

http://blog.davglass.com/files/yui/treetest/


Hope that helps.

If anyone has any other good ones (particularly any that benefit from  
prototype.js already being used), I'm very interested to hear!


Cheers,

Kit Grose


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Toggle L2 menu items (within WCAG)

[JonMarc Wright]

If you can make the L2 items show up when the L1 is *hovered over* instead
of clicked, then you can do that using css.  it will require some outside
scripts (usually either javascript or .htc) to get it working in all major
modern browsers, but there are a lot of tutorials out there.

you could check out sons of suckerfish at:
http://www.htmldog.com/articles/suckerfish/
that one uses some javascript to get it working

you could also take a look at:
http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp
that one uses proprietary .htc scripts to get it functioning cross browser i
believe.

i've used both with good results.

take care,
jm

On 10/29/07, Simon Cockayne <[EMAIL PROTECTED]> wrote:
>
> Hi,
>
> I am using an  to store "level 1" menu items , each of which
> directs to a page representing a topic.
>
> I know have a requirement to add in "level 2" menu items (zero or more
> beneath each L1 menu item", when user clicks(selects) an L1 menu, the L2
> options should become visible.
>
> Home
>Bio
>Research
>Teaching
>   
>   href="T1.html">Classes
>
>  Cases
>  
>
>Links
> 
>
>
> I've started down the rod of using DOM scripting...to remove the L2 items
> when the page loads and then toggle there addition/removal when a L1 item is
> clickedbut the JS is getting complicated...trying to support IE and
> Firefox.
>
> Is there a CSS way that can:
>
> A) Show ALL items of CSS is no supported (for WCAG).
> B) NOT impact SEO.
>
> Cheers,
>
> Simon
>
> ***
> List Guidelines: 
> http://webstandardsgroup.org
> /mail/guidelines.cfm 
> Unsubscribe: 
> http://webstandardsgroup.org
> /join/unsubscribe.cfm 
> Help: [EMAIL PROTECTED] <[EMAIL PROTECTED]>.org<[EMAIL PROTECTED]>
> ***


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

[WSG] Toggle L2 menu items (within WCAG)

[Simon Cockayne]

Hi,

I am using an  to store "level 1" menu items , each of which directs
to a page representing a topic.

I know have a requirement to add in "level 2" menu items (zero or more
beneath each L1 menu item", when user clicks(selects) an L1 menu, the L2
options should become visible.

Home
   Bio
   Research
   Teaching
  
 Classes

 Cases
 
   
   Links



I've started down the rod of using DOM scripting...to remove the L2 items
when the page loads and then toggle there addition/removal when a L1 item is
clickedbut the JS is getting complicated...trying to support IE and
Firefox.

Is there a CSS way that can:

A) Show ALL items of CSS is no supported (for WCAG).
B) NOT impact SEO.

Cheers,

Simon


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***