CSSPLAY

CSS MENUS › CSS ONLY Click action Vertical Concertina Menu with Acessibility

Date : 26th June 2012

For all modern browsers

• HOME
• SALES [2] [3]
  • Digital SLR Cameras
  • Interchangeable Lenses
  • Flash Guns and Accessories
  • Professional Tripods
  • Filters & Lens Hoods
• SERVICES [4] [5]
  • Printing & Framing
  • Photo Editing
  • Storage & Backup
• CONTACTS [6] [7]
  • Support
  • Sales
  • Buying
  • Photographers
  • Stockist
  • General
• STORES LOCATION [8] [9]
  • South West Region
  • North East Region
  • Central Region
• CONTACT US [F] [G]
  • Email Addresses
  • By Post
  • Telephone Numbers
  • Facsimile
• PRIVACY POLICY

Accessibility

To open a sub menu use the key in white - to close a sub menu use the key in yellow

Information

Suitable for IE9+, Firefox, Safari, Chrome, Opera, iPad, iPhone and iPod Touch.

Using the 'Radio' technique to produce a click action vertical concertina 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 set which sub menu you want open on page entry (if any) and in this demo the 'SERVICES' sub menu is open when you first visit this page.

This has a click to open a sub menu and a repeat click on the same parent item to close the sub menu, or click on another top level list item to close the current sub menu and open the new one.

This menu also works using accesskeys so that the menu can be operated using just the keyboard.

The slide open and close is not supported in IE9 so this browser will see an instant open/close 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 support donation 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 support donation 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.