CSS

play

Experiments with Cascading Style Sheets

CSS ONLY Click action Dropline Menu with Acessibility

27th June 2012

For IE9+, Firefox, Safari, Chrome, Opera, iPad, iPhone and iPod Touch

• HOME
• PRODUCTS
  • Cameras
  • Lenses
  • Flashguns
  • Tripods
  • Filters
  • Lens Adaptors
• SERVICES
  • Printing
  • Servicing
  • Repair
  • Photo Editing
  • Photo Framing
• SHOP
  • Online Shopping
  • Mail Order
  • Store Finder
  • Second Hand & Refurbished Offers
• SPECIAL DEALS
  • Tripods
  • Filters
  • Lenses
  • Flashguns
  • Cameras
• CONTACT US
  • Email
  • Post
  • Fax
  • Telephone
  • SMS
• FORUM

Accessibility:
To open a sub menus use [2] [4] [6] [8] [W]
To close sub menus use [3] [5] [7] [9] [X]
In Firefox the left/right arrow keys can be used to step through the menu top level items.

copyright © stu nicholls - CSS play

Information

Using the 'Radio' technique to produce a click action dropline menu where the selected sub levels stay open even when moving the mouse off the menu or clicking elswhere on the page.

You can also use accesskeys to open/close sub menus and for browsers that support left/right key navigation between radio buttons you can step through the sub menus using these keys.

All the top level list items are links to other pages, so to open a sub menu you click the down arrow which will slide down the sub menu list, the down arrow will then change to an up arrow on a red background and clicking this will close the sub menu list.

The sub menu slide down and up is not supported in IE9 so this browser will see an instant show/hidee of the sub menus.

Copyright

Because of all the time and effort spent in producing this demonstration
I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A donation to the 'Support CSSplay' fund is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a donation to the 'Support CSSplay' fund is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Terms and Conditions

This demonstration can be used subject to the following terms and conditions.

1. If you wish to use this demonstration in your website(s) please email me stu{at}cssplay.co.uk seeking permission.
2. You may NOT place this demonstration on another site for others to download.
3. You may NOT redistrubute or resell this demonstration.
4. Users agree not to remove or edit the credit notice within the stylesheet, or claim that this demonstration is their own.
5. Please see the Copyright statement above regarding the requirement for a support donation.