Mobile Friendly Website

CSSPLAY

Doing it with style

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

Canon EOS500D

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.


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.

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page