CSS

play

Experiments with Cascading Style Sheets

CSS play - Drop Everything v2 suitable for the iPad, iPhone and iPod Touch

25th August 2011

For IE7, IE8, IE9, IE10, Firefox, Safari, Chrome, Opera, iPad, iPhone, iPod Touch etc..

• Home

  CSS play - Drop Everything

  Welcome to the 'Drop Everything Menu' demonstration

  The menu that has everything

  From a simple dropdown text box to a multi-column panel with flyout and dropdown multi-level menus, forms and galleries. The dropdown box can be aligned to the left of the menu or the left of the top level list item and can be any width you like.

  Works in all the latest browsers, Internet Explorer IE7+, Firefox 3.6+, Safari, Chrome, Opera, Flock, SeaMonkey, Avant, iPad, iPhone and iPod Touch.

  A four column box

  Column One

  • List item one
  • List item two
  • List item three
  • List item four
  • List item five

  Column Two

  Works quite neat picky whiter desire, sensational quick sporty. Simulated choosy what warranty colossal action humongous smart youthful permanent. Drink lower polished lost cholesterol roasted kids brings oily juicy each.

  Column Three

  Spacious natural what have anti, our when, every touch. By tasty register grand formula yours. Unlimited fat-free don't stains pop-top mild, can't catch whiter adore very recommended, a youthful spring.

  Column Four

  Thought flexible crunchy messy prevents confident better more dazzling rated handling to. Parents waxy way, secure wealth handling delivers relaxing below magically whopping affordable.

  
  
• Dropdown Menu

  CSS play - Drop Everything

  A dropdown any width/depth menu

  • Top Level 1
  • Top Level 2
  • Top Level 3 +
    • Sub Level 1a
    • Sub Level 1b
    • Sub Level 1c +
      • Sub Level 2a
      • Sub Level 2b +
        • Sub Level 3a
        • Sub Level 3b +
          • Sub Level 4a
          • Sub Level 4b
          • A long Sub Level 4c +
            • Sub Level 5a
            • Sub Level 5b
            • Sub Level 5c
            • Sub Level 5d
            • Sub Level 5e
            • Sub Level 5f
          • Sub Level 4d
          • Sub Level 4e
          • Sub Level 4f
        • Sub Level 3c
        • Sub Level 3d
      • Sub Level 2c
    • Sub Level 1d
    • Sub Level 1e
  • Top Level 4
  • Top Level 5
  • Top Level 6 +
    • Sub Level 1a
    • Sub Level 1b +
      • Sub Level 2a
      • Sub Level 2b
      • Sub Level 2c
      • Sub Level 2d
      • Sub Level 2e
      • Sub Level 2f
    • Sub Level 1c
    • Sub Level 1d

  
  
  

  Today bigger world's spend, sold far outside secure. Sale clinically senses seasoned can't, far try cause really cheap market, unlimited made, thank-you why. Believe space hot price made quenches also removable silky chocolatey market now zesty confident traditional. Admire, yourself excites boast, sale, smooth delicious absolutely lost spring chance devour, durable, think. Zippy register can't chosen why by can't.

  Tired, open seasoned whopping appetizing if prevents relaxing while makes. Senses find plus go lost absolutely, excites, one. Care spicey sleek deserve juicy when it's discount sparkling this choice, peppy incredible. If exclusive, deserve survey, tummy out, out if really can't reputation. Full warm you, quenches flavored mega. Luscious, terrific low-cost, cause outlasts clinically this world's care. Bigger but classic jumbo refreshing moist, $19.95 spectacular stains.

  Appearance lifetime classic most squeezable, mild. Extra wealth light, take blend, can't comes jiffy. Just with great clean velvety sold tangy goodbye youthful vibrant only full-bodied trust treat clean. Vinyl don't it's pay credit-card included stains, unique. Deal multi-purpose tasting, incredible zesty open postage appreciate outstanding wherever double.

• Flyout Menus

  CSS play - Drop Everything

  A flyout any width/depth menu

  • Top Level 1
  • Top Level 2 +
    • Sub Level 1a
    • Sub Level 1b +
      • Sub Level 2a
      • Sub Level 2b
      • Sub Level 2c
      • Sub Level 2d
    • Sub Level 1c
    • Sub Level 1d
    • Sub Level 1e
  • Top Level 3 +
    • Sub Level 1a
    • Sub Level 1b
    • Sub Level 1c +
      • Sub Level 2a
      • Sub Level 2b +
        • Sub Level 3a
        • Sub Level 3b
        • Sub Level 3c
        • Sub Level 3d
      • Sub Level 2c
    • Sub Level 1d
    • Sub Level 1e
  • Top Level 4
  • Top Level 5
  • Top Level 6 +
    • Sub Level 1a
    • Sub Level 1b
    • Sub Level 1c
    • Sub Level 1d

  

  Today bigger world's spend, sold far outside secure. Sale clinically senses seasoned can't, far try cause really cheap market, unlimited made, thank-you why. Believe space hot price made quenches also removable silky chocolatey market now zesty confident traditional. Admire, yourself excites boast, sale, smooth delicious absolutely lost spring chance devour, durable, think. Zippy register can't chosen why by can't.

  Tired, open seasoned whopping appetizing if prevents relaxing while makes. Senses find plus go lost absolutely, excites, one. Care spicey sleek deserve juicy when it's discount sparkling this choice, peppy incredible. If exclusive, deserve survey, tummy out, out if really can't reputation. Full warm you, quenches flavored mega. Luscious, terrific low-cost, cause outlasts clinically this world's care. Bigger but classic jumbo refreshing moist, $19.95 spectacular stains.

• Gallery

  CSS play - Drop Everything

  Gallery with hover action, default image and caption with links

  • Caption one with link
  • Caption two with link
  • Caption three with link
  • Caption four with link
  • Caption five with link
  • Caption six with link

  
  
• Contact Form

  CSS play - Drop Everything

  Contact Form

  Name :
  Email :
  Website :
  Subject :
  Message :
  Submit
  
• Combo Page

  CSS play - Drop Everything

  Flyout and Dropdown Menus in two adjacent columns

  • Top Level 1 +
    • Sub Level 1a
    • Sub Level 1b +
      • Sub Level 2a
      • Sub Level 2b
      • Sub Level 2c
      • Sub Level 2d
    • Sub Level 1c
    • Sub Level 1d
    • Sub Level 1e
  • Top Level 2 +
    • Sub Level 1a
    • Sub Level 1b
    • Sub Level 1c +
      • Sub Level 2a
      • Sub Level 2b +
        • Sub Level 3a
        • Sub Level 3b
        • Sub Level 3c
        • Sub Level 3d
      • Sub Level 2c
    • Sub Level 1d
    • Sub Level 1e
  • Top Level 3
  • Top Level 4 +
    • Sub Level 1a
    • Sub Level 1b
    • Sub Level 1c
    • Sub Level 1d

  

  Lower tired than thought, keen reputation locked-in. Prevents tough, latest, tired mountain whiter shopping we herbal inside blast that escape. New with, offer product choosy compact zippy. Quick senses hello free listen why outstanding lasting as warm satisfying.

  • Top Level 1 +
    • Sub Level 1a
    • Sub Level 1b +
      • Sub Level 2a
      • Sub Level 2b
      • Sub Level 2c +
        • Sub Level 3a
        • Sub Level 3b
        • Sub Level 3c
        • Sub Level 3d
      • Sub Level 2d
    • Sub Level 1c
    • Sub Level 1d
    • Sub Level 1e
  • Top Level 2 +
    • Sub Level 1a
    • Sub Level 1b
    • Sub Level 1c +
      • Sub Level 2a
      • Sub Level 2b
      • Sub Level 2c
    • Sub Level 1d
    • Sub Level 1e
  • Top Level 3 +
    • Sub Level 1a
    • Sub Level 1b +
      • Sub Level 2a
      • Sub Level 2b
      • Sub Level 2c
      • Sub Level 2d
    • Sub Level 1c
    • Sub Level 1d

  
  

  Sure, out, better brighter extra mild colossal with when. Unique rated, agree grand it's offer clinically, can super. Terrific out tummy real we ocean colossal out. Boast, clean simulated longer neat makes very grab smooth clean. Tasty, cheap delectable want splash original handling latest.

  
  

  
  

  Three columns

  

  Thirsty tangy tasting brighter confident quenches burst, sharpest any full only pennies.

  

  Multi-purpose, spacious aroma citrus dry pleasing your artificial, stains excellent.

  

  Revolutionary less anti kids creamy it's. Velvety classic flavored people ultimate.

  
  

  Six columns

  

  

  

  

  

  

  
  
• Top Level Only
• Close X

copyright © stu nicholls - CSS play

Information

Probably the most complex menu on CSS play but also the most configurable.

This one allows you to have a drop panel which can be configured by rows and by columns to fit any specified width of panel. You can also specify if you want the dropdown panel to be aligned left with the top level menu or aliged left with the top level list item. It is configured to have 6 possible columns but this can be increased to any number with just a small stylesheet change.

There are two 'built-in' dropdown and flyout menus that can have as many levels as you like and the list items can be any length. The dropdown menu flyouts can also be left and right aligned to stay within the boundaries of the dropdown panel.

There is also a built-in gallery and form.

The iPad, iPhone and iPod Touch will popup a 'Close' tab centered above the top level tabs. This can be tapped to close that menu structure. The top level items can also be links and this will still work on these devices.

This has been tested in IE7, IE8, IE9, IE10, Firefox 3.6+, Safari (latest), Opera (latest), Chrome (latest), Flock, SeaMonkey, Avant, iPad, iPhone and iPod Touch.

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.