Re: [WSG] Toggle L2 menu items (within WCAG)
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)
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)
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 ul to store level 1 menu items li, 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. ul id=navmenu li id=t-Home class=L1a href=index.htmlHome/a/li li id=t-Bio class=L1a href= Bio.htmlBio/a/li li id=t-Research class=L1a href=Research.html Research/a/li li id=t-Teaching class=L1Teaching ul li id=t-TeachingClasses class=L2a href=T1.htmlClasses/a/li li id=t-TeachingCases class=L2a href= T2.html Cases/a/li /ul /li li id=t-Links class=L1a href=Links.htmlLinks/a/li /ul 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.orghttp://webstandardsgroup.org/mail/guidelines.cfm /mail/guidelines.cfm http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.orghttp://webstandardsgroup.org/join/unsubscribe.cfm /join/unsubscribe.cfm 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] ***
Re: [WSG] Toggle L2 menu items (within WCAG)
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)
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 ul to store level 1 menu items li, 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. ul id=navmenu li id=t-Home class=L1a href=index.htmlHome/a/li li id=t-Bio class=L1a href= Bio.htmlBio/a/li li id=t-Research class=L1a href=Research.htmlResearch/a/li li id=t-Teaching class=L1Teaching ul li id=t-TeachingClasses class=L2a href=T1.htmlClasses/a/li li id=t-TeachingCases class=L2a href= T2.htmlCases/a/li /ul /li li id=t-Links class=L1a href=Links.htmlLinks/a/li /ul 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] ***
