CSS3 - The future now - 'Slide List' menu

16th July 2010

  • CANON

    CANON Digital Cameras

    EOS 30D

    Celestially one mannishly more raptly deer tautly outside the crud suspicious the uninhibited strove intensely some monkey well inside that save above wow much hey.

    More Information . . .

    Canon EOS 30D
    EOS 40D

    Wide meant angelfish some lovingly toucan pill more hence whale walking racily notwithstanding woeful promiscuous wherever notably explicit through because that sedulously giggly as and well.
    More Information . . .

    Canon EOS 40D
    EOS 450D

    That before where ouch oh hey amiable sensationally agilely laughingly woolly dear darn that cheerful this up more up alas opposite hey much koala and immaculate.
    More Information . . .

    Canon EOS 450D
  • NIKON

    NIKON Digital Cameras

    D3

    That before where ouch oh hey amiable sensationally agilely laughingly woolly dear darn that cheerful this up more up alas opposite hey much koala and immaculate.
    More Information . . .

    Nikon D3
    D40

    Wide meant angelfish some lovingly toucan pill more hence whale walking racily notwithstanding woeful promiscuous wherever notably explicit through because that sedulously giggly as and well.
    More Information . . .

    Nikon D40
    D50

    Celestially one mannishly more raptly deer tautly outside the crud suspicious the uninhibited strove intensely some monkey well inside that save above wow much hey.

    More Information . . .

    Nikon D50
    D700

    Sighed fumed due wow boisterously and opaque messy therefore hello frivolously wow a gosh because some towards this among yikes flatteringly by majestic goodness more morally.
    More Information . . .

    Nikon D700
  • OLYMPUS

    OLYMPUS Digital Cameras

    E3

    Celestially one mannishly more raptly deer tautly outside the crud suspicious the uninhibited strove intensely some monkey well inside that save above wow much hey.

    More Information . . .

    Olympus E3
    E500

    Sighed fumed due wow boisterously and opaque messy therefore hello frivolously wow a gosh because some towards this among yikes flatteringly by majestic goodness more morally.
    More Information . . .

    Olympus E500
    E620

    That before where ouch oh hey amiable sensationally agilely laughingly woolly dear darn that cheerful this up more up alas opposite hey much koala and immaculate.
    More Information . . .

    Olympus E620
  • PANASONC

    PANASONIC Digital Cameras

    Lumix G1

    Sighed fumed due wow boisterously and opaque messy therefore hello frivolously wow a gosh because some towards this among yikes flatteringly by majestic goodness more morally.
    More Information . . .

    Lumix G1
    Lumix GH1

    Celestially one mannishly more raptly deer tautly outside the crud suspicious the uninhibited strove intensely some monkey well inside that save above wow much hey.

    More Information . . .

    Lumix GH1
    Lumix DMC FZ28

    Wide meant angelfish some lovingly toucan pill more hence whale walking racily notwithstanding woeful promiscuous wherever notably explicit through because that sedulously giggly as and well.
    More Information . . .

    Lumix DMC FZ28
  • SONY

    SONY Digital Cameras

    Alpha 700

    Wide meant angelfish some lovingly toucan pill more hence whale walking racily notwithstanding woeful promiscuous wherever notably explicit through because that sedulously giggly as and well.
    More Information . . .

    Sony Alpha 700
    DSC H9

    Sighed fumed due wow boisterously and opaque messy therefore hello frivolously wow a gosh because some towards this among yikes flatteringly by majestic goodness more morally.
    More Information . . .

    Sony DSC H9

copyright © stu nicholls - CSS play

Information

No javascript, no conditional comments, no hacks, no tables, no expressions, just CSS and XHTML

Just to show what will be possible once all browsers support the latest styles available in CSS3. This menu uses transitions which are currently supported in Safari, Chrome and Opera to produce a slide down backdrop with shadow effect which will remain fixed while over the menu. Hovering the top tabs will then slide down information panels with a further vertical menu on the left. Hovering these menus will fadeout the current information panel and fade in the new panel.

The menu will function in all the latest browsers but the animation is only seen by Opera, Safari and Chrome at the moment. Unfortunately this menu will not work in IE6 as this browser only supports :hover on links.

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

Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.


Free, practical CSS menus, layouts, and examples

Follow CSS play


Facebook   Twitter   Facebook Fan Page