CSSPLAY

CSS MENUS › Slide down / slide fly with animation

Date : 19th November 2010

For all modern browsers

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

• Cameras
  • Canon
    • EF-S 10-22
      Zoom
    • EF-S 18-200
      Zoom
    • EF-S 55-250
      Zoom
    • EF-S 60
      Macro
  • Nikon
    • Nikkor 18-105
      Zoom
    • Nikkor 18-200
      Zoom
    • Nikkor 55-200
      Zoom
    • Nikkor 105
      Macro
  • Panasonic
    • Lumix 7-14
      Zoom
    • Lumix 14-140
      Zoom
    • Lumix 45-200
      Zoom
  • Sony
    • SAL 18-250
      Zoom
    • SAL 50
      Fixed
  • Olympus
    • Zuiko 9mm
      Wide angle
    • Zuiko 12-60
      Zoom
    • Zuiko 14-150
      Zoom
    • Zuiko 40-150
      Zoom

A digital camera (also digicam or camera for short) is a camera that takes video or still photographs, or both, digitally by recording images via an electronic image sensor.

Many compact digital still cameras can record sound and moving video as well as still photographs. Most 21st century cameras are digital.

Digital cameras can do things film cameras cannot: displaying images on a screen immediately after they are recorded, storing thousands of images on a single small memory device, recording video with sound, and deleting images to free storage space. Some can crop pictures and perform other elementary image editing. The optical system works the same as in film cameras, typically using a lens with a variable diaphragm to focus light onto an image pickup device. The diaphragm and shutter admit the correct amount of light to the imager, just as with film but the image pickup device is electronic rather than chemical.

Digital cameras are incorporated into many devices ranging from PDAs and mobile phones (called camera phones) to vehicles. The Hubble Space Telescope and other astronomical devices are essentially specialized digital cameras.

Information

No javascript, no hacks, no expressions, just CSS, XHTML.

It has been a while since I posted any new demo because of our recent three week trip to New Zealand, Australia and Singapore and then catching up on all the work waiting for us when we returned to the UK, but now that we are up to date I can post our next demo which makes use of CSS3 enhancements which are support in all the latest versions of non-IE browsers.

So this is a dropdown and flyout menu with many CSS enhancements for browsers that support them. At the moment these are the latest versions of Opera, Safari, Chrome and Firefox v4b.

The enhancements are:

• The dropdown submenu will slide down and up.
• The flyout submenu will slide out and in.
• When hovering the images they will fade to 50% opacity and display information text on top of the image.
• Rounded corners on all levels.
• Drop shadows on all levels and these merge together so there is no unsightly join.

Tested in IE6, IE7, IE7 emulation, IE8, Firefox, Opera, Safari, Chrome, Avant, SeaMonkey, Flock and Maxthon. It should also work in Mac browsers.

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.