CSS3 - The future now - Expand and Slide Down Menu

20th January 2011

Animations viewable in Safari, Chrome, Opera and Firefox v4 beta.


  • General
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel libero ac elit cursus rutrum eu ac urna. Phasellus ipsum orci, rutrum eu pulvinar non, posuere nec augue.
    Origin
    Duis velit leo, rutrum non bibendum non, feugiat et ipsum. In hac habitasse platea dictumst. In risus libero, aliquam non malesuada quis, varius id libero. Nunc sed metus ac quam laoreet ultricies a sed urna. Mauris aliquet dapibus pharetra.
    Habitat
    Aliquam quis magna sit amet nisi blandit vestibulum. Sed et orci sed neque interdum elementum quis non tellus.
    Feeding
    Curabitur tempus velit turpis, sit amet pulvinar justo. Proin eu dolor neque. Pellentesque facilisis erat sit amet lorem blandit egestas.
    Caring
    Quisque eget dolor tellus. Praesent ullamcorper tristique mi eget volutpat. Nullam bibendum dolor id arcu condimentum vehicula.
  • General
    Phasellus tempor posuere rhoncus. Etiam eleifend nisi a nibh imperdiet lobortis venenatis lacus facilisis. Fusce venenatis diam sit amet elit viverra porta. Vivamus vitae tempus risus.
    Origin
    Nunc dui eros, sodales quis mollis a, sollicitudin eget quam. Proin et lorem eu magna elementum pulvinar quis a quam. Suspendisse a erat eu velit feugiat adipiscing.
    Habitat
    Vivamus urna enim, luctus et fringilla vel, aliquet ut ligula. Pellentesque tincidunt posuere lobortis. Integer sodales sollicitudin sem ac molestie. Sed pharetra, odio ut venenatis aliquam, orci mi dapibus mi, in tristique urna augue id nisi.
    Feeding
    Proin lacus lectus, fermentum vel dictum ac, iaculis sit amet metus. Morbi augue turpis, malesuada quis fringilla ornare, rutrum et nisl. Praesent ultricies, leo ac interdum rhoncus, sem est auctor eros, in lobortis diam dui non augue.
    Caring
    Pellentesque malesuada, justo ut auctor lobortis, urna dolor dignissim odio, malesuada blandit lorem mi id nunc. Donec tristique auctor sollicitudin.
  • General
    In et arcu eget risus sagittis tincidunt. Quisque nibh odio, lobortis at varius viverra, aliquam sed metus. Phasellus sagittis, dui sit amet pharetra iaculis, quam nulla sollicitudin sem, vel mattis turpis leo et metus.
    Origin
    Curabitur varius mauris vel dolor aliquet accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam lectus, luctus at vehicula sed, ultricies in orci.
    Habitat
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque bibendum, lacus blandit mattis dignissim, justo diam lobortis felis, at convallis turpis velit vitae libero.
    Feeding
    Nunc velit arcu, laoreet sed tristique quis, malesuada ut erat. Pellentesque suscipit diam ut tortor faucibus id tincidunt felis gravida. Nulla porta lacinia pellentesque.
    Caring
    Aliquam aliquet blandit justo sed gravida. Curabitur tristique sollicitudin justo, nec vehicula dui porta nec. Sed eleifend lacinia mollis. Nunc purus ante, lacinia sed faucibus id, pellentesque eget lectus.
  • General
    In ac tellus ac sapien ultricies hendrerit. Suspendisse potenti. Praesent blandit, nisi nec aliquam sodales, erat diam tincidunt dui, eu euismod lectus sapien sit amet nisi. Quisque in tellus dolor.
    Origin
    Aenean sodales dui a sem egestas ornare. Cras sem dui, gravida sit amet ullamcorper non, placerat et sem. Pellentesque ac diam lacinia lacus commodo fermentum.
    Habitat
    Nullam a odio at nisi consequat posuere quis non eros. In rutrum viverra augue, ac facilisis libero ultricies nec. Aliquam cursus turpis nec lorem gravida in dignissim augue facilisis. Maecenas condimentum nisi sed metus luctus mattis.
    Feeding
    Mauris sagittis luctus nisi eget ultrices. Integer egestas tristique dapibus. Sed sodales bibendum molestie. Mauris diam arcu, vehicula et tempor in, consectetur nec dui. Nunc eu enim sed ligula aliquam gravida ac ac ipsum.
    Caring
    Praesent dictum tincidunt ipsum, id pellentesque mi semper et. Fusce mollis quam nec leo pharetra hendrerit. Nunc viverra, nisl ac dictum dictum, nibh libero fermentum metus, et ornare odio lacus id metus.
  • General
    Donec odio tortor, fermentum nec placerat eget, pretium accumsan purus. Nam sit amet dui vitae lectus malesuada porttitor sed et felis. Sed nec facilisis leo. Sed ac nibh sed turpis pretium vestibulum quis nec massa.
    Origin
    Duis adipiscing, lectus bibendum fermentum tempor, risus lectus ultricies leo, ut porta nisl velit in libero. Fusce luctus ultrices ligula ac tempus. Mauris urna nunc, sollicitudin in facilisis et, auctor sit amet nibh.
    Habitat
    Donec tristique posuere sapien nec sagittis. Proin vestibulum, purus quis pulvinar viverra, magna mi blandit arcu, at volutpat sapien tortor ut justo. Nulla sed mauris ac augue pharetra eleifend quis a est. Integer accumsan mauris sit amet turpis sodales tempus.
    Feeding
    Curabitur varius mauris vel dolor aliquet accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam lectus, luctus at vehicula sed, ultricies in orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    Caring
    Pellentesque bibendum, lacus blandit mattis dignissim, justo diam lobortis felis, at convallis turpis velit vitae libero. Nunc velit arcu, laoreet sed tristique quis, malesuada ut erat.

copyright © stu nicholls - CSS play

Information

Using CSS3 to produce an expanding menu animation with slide down sub menus.

Each section will expand to reveal the full width image on hover. The unhovered panels with shrink to keep the overall width of the menu the same.The hovered panel menu will expand vertically to reveal descriptive text which can contain any information you want with links possible.

Tested in IE7, IE8, IE9, Firefox, Opera, Safari and Chrome. It should also work in Mac browsers. IE7, IE8, IE9 and Firefox 3.x will see an instant change of image sizing and 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 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