CSSPLAY

CSS MENUS › CSS ONLY Click action Dropline Menu with Acessibility

Date : 27th June 2012

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

• 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.

Information

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

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 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.