[WSG] CSS Expandable Menu
Hello, I would be grateful if someone could clarify whether there is such a thing as a pure CSS expandable menu. The sort of thing I'm looking for is the expandable / collapsible hierachy commonly shown in the left-hand frame of Windows programs such as Explorer or Outlook. I'm trying to avoid use of Javascript due to accessibility concerns. Thank you and regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS Expandable Menu
Hi Grant, I'm not sure if this is what you're looking for, but this might help: http://www.alistapart.com/articles/dropdowns Unfortunately, this does require some javascript as IE doesn't support a few CSS elements. Cheers, Jelina On Tue, Jun 29, 2010 at 9:30 AM, grant_malcolm_bai...@westnet.com.au wrote: Hello, I would be grateful if someone could clarify whether there is such a thing as a pure CSS expandable menu. The sort of thing I'm looking for is the expandable / collapsible hierachy commonly shown in the left-hand frame of Windows programs such as Explorer or Outlook. I'm trying to avoid use of Javascript due to accessibility concerns. Thank you and regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS Expandable Menu
Hi Grant, Maybe this can help: http://free-css-menu.com/vertical-css-menu.html SteF. On Mon, Jun 28, 2010 at 7:30 PM, grant_malcolm_bai...@westnet.com.auwrote: Hello, I would be grateful if someone could clarify whether there is such a thing as a pure CSS expandable menu. The sort of thing I'm looking for is the expandable / collapsible hierachy commonly shown in the left-hand frame of Windows programs such as Explorer or Outlook. I'm trying to avoid use of Javascript due to accessibility concerns. Thank you and regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** -- stephaneblanchard.ca designer web www.twitter.com/stefblanchard www.facebook.com/stefblanchard *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS Expandable Menu
If you're talking about a tree-like menu, I've never come across a purely CSS one. It strikes me that CSS alone doesn't have the vocabulary to deal with something that requires an 'expanded' and 'collapsed' state. If you're worried about accessibility, either * expand it all by default, and use JavaScript to collapse and expand it or * do a page-reload if there's simply too much content to have it all expanded at once. (And then disable that if a user has JS turned on). This kind of thing is very easily accomplishable with something like jQuery, and you can generally work through or around any accessibility concerns. - Josh -- www.oxideinteractive.com.au On 29/6/2010 9:30 AM, grant_malcolm_bai...@westnet.com.au wrote: Hello, I would be grateful if someone could clarify whether there is such a thing as a pure CSS expandable menu. The sort of thing I'm looking for is the expandable / collapsible hierachy commonly shown in the left-hand frame of Windows programs such as Explorer or Outlook. I'm trying to avoid use of Javascript due to accessibility concerns. Thank you and regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS Expandable Menu
Hi Grant, It’s great you’re looking for an accessible menu solution, but I’d recommend not throwing away javascript solutions in the process. Yahoo has some great information on adding WAI-Aria roles and states to menu buttons using javascript that you may be able to adapt for your purposes without too much trouble. http://developer.yahoo.com/yui/3/examples/node-focusmanager/node-focusmanager-3.html They also provide a menu plugin that might be useful to you. http://developer.yahoo.com/yui/examples/menu/menuwaiaria.html Cheers, S From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of grant_malcolm_bai...@westnet.com.au Sent: Tuesday, 29 June 2010 9:31 AM To: wsg@webstandardsgroup.org Subject: [WSG] CSS Expandable Menu Hello, I would be grateful if someone could clarify whether there is such a thing as a pure CSS expandable menu. The sort of thing I'm looking for is the expandable / collapsible hierachy commonly shown in the left-hand frame of Windows programs such as Explorer or Outlook. I'm trying to avoid use of Javascript due to accessibility concerns. Thank you and regards, Grant Bailey Please consider the environment before printing this e-mail. The information contained in this email and any attachment is confidential and may contain legally privileged or copyright material. It is intended only for the use of the addressee(s). If you are not the intended recipient of this email, you are not permitted to disseminate, distribute or copy this email or any attachments. If you have received this message in error, please notify the sender immediately and delete this email from your system. The ABC does not represent or warrant that this transmission is secure or virus free. Before opening any attachment you should check for viruses. The ABC's liability is limited to resupplying any email and attachments. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS Expandable Menu
Hi Grant, You're meaning the sort of tree-menu arrangements that have a little plus next to items with children, and clicking the plus makes the children appear and push the other elements further down, right? I don't believe what you're looking for is possible, as that sort of hierarchical menu requires changes that stick rather than just activating on hover. CSS just isn't designed to do that sort of thing. Then again, JavaScript doesn't automatically mean inaccessible. What concerns in particular did you have about JS making the menu inaccessible? Cheers, Seona. On 29 June 2010 09:30, grant_malcolm_bai...@westnet.com.au wrote: Hello, I would be grateful if someone could clarify whether there is such a thing as a pure CSS expandable menu. The sort of thing I'm looking for is the expandable / collapsible hierachy commonly shown in the left-hand frame of Windows programs such as Explorer or Outlook. I'm trying to avoid use of Javascript due to accessibility concerns. Thank you and regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS Expandable Menu
Hi Grant, I'm trying to avoid use of Javascript due to accessibility concerns. There is no problem with using a javascript powered menu as long as that menu is accessible with javascript off. As a side note, pure CSS menus usually come with usability issues. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS Expandable Menu
The YUI3 menu widget has great accessibility support http://developer.yahoo.com/yui/3/node-menunav/ Accessibility Usability Minded The MenuNav Node Plugin was built with both accessibility and usability in mind. The MenuNav Node Plugin implements established mouse and keyboard interaction patterns to deliver a user experience that is both familiar and easy to use. To that foundation the MenuNav Node plugin adds support for screen readers through the use of the WAI-ARIA Roles and States. Watch this video for a quick a demo of a menu created using the MenuNav Node Plugin using the WAI-ARIA Roles and States running in Firefox 3 using the Window-Eyes screen reader. -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Thierry Koblentz Sent: Monday, June 28, 2010 4:56 PM To: wsg@webstandardsgroup.org Subject: RE: [WSG] CSS Expandable Menu Hi Grant, I'm trying to avoid use of Javascript due to accessibility concerns. There is no problem with using a javascript powered menu as long as that menu is accessible with javascript off. As a side note, pure CSS menus usually come with usability issues. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
