Home » Snippets » Collection of menu effects Collection of menu effects - Snippet --- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart --- Bootstrap Foundation Animate.css Preview HTML CSS JS <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Menu Effects</title> <link rel="stylesheet" href="http://louisremi.github.com/menu-effects/css/style.css" /> </head> <body> <div id="main" role="main"> <ul id="menu2" class="menu"> <li tabindex="0"> Helix <ul class="submenu helix"> <li>sub-One</li> <li>sub-Two</li> <li>sub-Three</li> <li>sub-Four</li> <li>sub-Five</li> <li>sub-Six</li> <li>sub-Seven</li> </ul> </li><li tabindex="0"> Wave <ul class="submenu wave"> <li>sub-One</li> <li>sub-Two</li> <li>sub-Three</li> <li>sub-Four</li> <li>sub-Five</li> <li>sub-Six</li> <li>sub-Seven</li> </ul> </li><li tabindex="0"> Fan <ul class="submenu fan"> <li>sub-One</li> <li>sub-Two</li> <li>sub-Three</li> <li>sub-Four</li> <li>sub-Five</li> <li>sub-Six</li> <li>sub-Seven</li> </ul> </li><li tabindex="0"> Papercut <ul class="submenu papercut"> <li>sub-One</li> <li>sub-Two</li> <li>sub-Three</li> <li>sub-Four</li> <li>sub-Five</li> <li>sub-Six</li> <li>sub-Seven</li> </ul> </li><li tabindex="0"> Fly <ul class="submenu fly"> <li>sub-One</li> <li>sub-Two</li> <li>sub-Three</li> <li>sub-Four</li> <li>sub-Five</li> <li>sub-Six</li> <li>sub-Seven</li> </ul> </li> </ul><!-- /#menu2 --> <ul id="menu1" class="menu"> <li tabindex="0"> Blind <ul class="submenu blind"> <li>sub-One</li> <li>sub-Two</li> <li>sub-Three</li> <li>sub-Four</li> <li>sub-Five</li> <li>sub-Six</li> <li>sub-Seven</li> </ul> </li><li tabindex="0"> Venitian <ul class="submenu venitian"> <li>sub-One</li> <li>sub-Two</li> <li>sub-Three</li> <li>sub-Four</li> <li>sub-Five</li> <li>sub-Six</li> <li>sub-Seven</li> </ul> </li><li tabindex="0"> Jaws <ul class="submenu jaws"> <li>sub-One</li> <li>sub-Two</li> <li>sub-Three</li> <li>sub-Four</li> <li>sub-Five</li> <li>sub-Six</li> <li>sub-Seven</li> </ul> </li><li tabindex="0"> Fence <ul class="submenu fence"> <li>sub-One</li> <li>sub-Two</li> <li>sub-Three</li> <li>sub-Four</li> <li>sub-Five</li> <li>sub-Six</li> <li>sub-Seven</li> </ul> </li><li tabindex="0"> Zipper <ul class="submenu zipper"> <li>sub-One</li> <li>sub-Two</li> <li>sub-Three</li> <li>sub-Four</li> <li>sub-Five</li> <li>sub-Six</li> <li>sub-Seven</li> </ul> </li> </ul><!-- /#menu1 --> </div></body> </html> /* * Menu Effects: A collection of CSS3 menu effects (degrades gracefully in IE8). * * Don't hesitate to create new effects and remove the ones you don't need. * * latest version and complete README available on Github: * https://github.com/louisremi/menu-effects * * Copyright 2012 @louis_remi * Licensed under the MIT license. * * Are you using this in a paid work? * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON * */ .menu, .menu ul { list-style: none; padding: 0; } .menu ul { margin: 0; } .menu > li { position: relative; display: inline-block; outline: 0; } .submenu { position: absolute; left: 0; top: 100%; z-index: 0; overflow: hidden; max-height: 0; /* The transition-delay prevents the menu to disappear before the transition is run backward * It's ~= length of the animation (.6s) + highest item transition delay (466ms) */ -webkit-transition: max-height 1ms linear 1s; -moz-transition: max-height 1ms linear 1s; /* A .submenu should be only revealed when hovering the .menu */ pointer-events: none; } .menu > li:hover .submenu, .menu > li:focus .submenu { pointer-events: auto; z-index: 10; max-height: 2000px; -webkit-transition: none; -moz-transition: none; } /* Progressive Anim * ================================================================== * This is a lot of redundant code but the result is worth it * This should be edited for menus with more or much less than 8 items */ /* forward */ .menu > li:hover .submenu li:nth-child(1) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .menu > li:hover .submenu li:nth-child(2) { -webkit-transition-delay: 66ms; -moz-transition-delay: 66ms; -ms-transition-delay: 66ms; -o-transition-delay: 66ms; transition-delay: 66ms; } .menu > li:hover .submenu li:nth-child(3) { -webkit-transition-delay: 133ms; -moz-transition-delay: 133ms; -ms-transition-delay: 133ms; -o-transition-delay: 133ms; transition-delay: 133ms; } .menu > li:hover .submenu li:nth-child(4) { -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -ms-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms; } .menu > li:hover .submenu li:nth-child(5) { -webkit-transition-delay: 266ms; -moz-transition-delay: 266ms; -ms-transition-delay: 266ms; -o-transition-delay: 266ms; transition-delay: 266ms; } .menu > li:hover .submenu li:nth-child(6) { -webkit-transition-delay: 333ms; -moz-transition-delay: 333ms; -ms-transition-delay: 333ms; -o-transition-delay: 333ms; transition-delay: 333ms; } .menu > li:hover .submenu li:nth-child(7) { -webkit-transition-delay: 400ms; -moz-transition-delay: 400ms; -ms-transition-delay: 400ms; -o-transition-delay: 400ms; transition-delay: 400ms; } .menu > li:hover .submenu li:nth-child(8) { -webkit-transition-delay: 466ms; -moz-transition-delay: 466ms; -ms-transition-delay: 466ms; -o-transition-delay: 466ms; transition-delay: 466ms; } /* backward */ .submenu li:nth-child(1) { -webkit-transition-delay: 466ms; -moz-transition-delay: 466ms; -ms-transition-delay: 466ms; -o-transition-delay: 466ms; transition-delay: 466ms; } .submenu li:nth-child(2) { -webkit-transition-delay: 400ms; -moz-transition-delay: 400ms; -ms-transition-delay: 400ms; -o-transition-delay: 400ms; transition-delay: 400ms; } .submenu li:nth-child(3) { -webkit-transition-delay: 333ms; -moz-transition-delay: 333ms; -ms-transition-delay: 333ms; -o-transition-delay: 333ms; transition-delay: 333ms; } .submenu li:nth-child(4) { -webkit-transition-delay: 266ms; -moz-transition-delay: 266ms; -ms-transition-delay: 266ms; -o-transition-delay: 266ms; transition-delay: 266ms; } .submenu li:nth-child(5) { -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -ms-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms; } .submenu li:nth-child(6) { -webkit-transition-delay: 133ms; -moz-transition-delay: 133ms; -ms-transition-delay: 133ms; -o-transition-delay: 133ms; transition-delay: 133ms; } .submenu li:nth-child(7) { -webkit-transition-delay: 66ms; -moz-transition-delay: 66ms; -ms-transition-delay: 66ms; -o-transition-delay: 66ms; transition-delay: 66ms; } .submenu li:nth-child(8) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } /* Default ================================================================= */ .submenu li { opacity: 0; -webkit-transition: opacity .4s, -webkit-transform .6s, max-height .6s; -moz-transition: opacity .4s, -moz-transform .6s, max-height .6s; -ms-transition: opacity .4s, -ms-transform .6s, max-height .6s; -o-transition: opacity .4s, -o-transform .6s, max-height .6s; transition: opacity .4s, transform .6s, max-height .6s; } .menu > li:hover .submenu li, .menu > li:focus .submenu li { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } /* Helix ================================================================= */ .helix { -webkit-perspective: 400px; -moz-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; } .helix li { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } /* Wave ================================================================= */ .wave li { -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: skewY(-90deg); -moz-transform: skewY(-90deg); -ms-transform: skewY(-90deg); -o-transform: skewY(-90deg); transform: skewY(-90deg); } /* Fan ================================================================= */ .fan li { -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } /* Papercut ================================================================= */ .papercut { -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 0% 0%; -moz-perspective-origin: 0% 0%; -ms-perspective-origin: 0% 0%; -o-perspective-origin: 0% 0%; perspective-origin: 0% 0%; } .papercut li { -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: skewY(30deg); -moz-transform: skewY(30deg); -ms-transform: skewY(30deg); -o-transform: skewY(30deg); transform: skewY(30deg); } /* Fly ================================================================= */ .fly { -webkit-perspective: 400px; -moz-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; } .fly li { -webkit-transform-origin: 50% 50% -50px; -moz-transform-origin: 50% 50% -50px; -ms-transform-origin: 50% 50% -50px; -o-transform-origin: 50% 50% -50px; transform-origin: 50% 50% -50px; -webkit-transform: rotateX( -180deg ); -moz-transform: rotateX( -180deg ); -ms-transform: rotateX( -180deg ); -o-transform: rotateX( -180deg ); transform: rotateX( -180deg ); } /* Blind ================================================================= */ .blind li { max-height: 0; } .menu > li:hover .blind li, .menu > li:focus .blind li { /* This should be changed to the normal height of list-items */ max-height: 30px; } /* Venitian ================================================================= */ .venitian li { -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(1,0); -moz-transform: scale(1,0); -ms-transform: scale(1,0); -o-transform: scale(1,0); transform: scale(1,0); } /* Jaws ================================================================= */ .jaws li { -webkit-transform-origin: 50% -100px; -moz-transform-origin: 50% -100px; -ms-transform-origin: 50% -100px; -o-transform-origin: 50% -100px; transform-origin: 50% -100px; } .jaws li:nth-child(odd) { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .jaws li:nth-child(even) { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } /* Fence ================================================================= */ .fence { -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; } .fence li:nth-child(odd) { -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } .fence li:nth-child(even) { -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } /* Zipper ================================================================= */ .zipper li:nth-child(odd) { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .zipper li:nth-child(even) { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } Tutorials Palace 10 January, 2019 No Comments 75 Views Collection of menu effects CSS Navigation Menu CSS Navigation Menu Download Collection of menu effects Code Fullscreen Tutor Play Walkthrough Related Snippets Box Shadow Editor Canvas Particles Emission Dripping Paint CSS3 Animation National flag of Mongolia Particles Emission Based on Mouse Moves Custom Cursor Images with CSS Particle System Leaving Trails CSS3 LT Form Particles Gravity Effect Leave a Reply Cancel replyYour email address will not be published. Required fields are marked *Name * Email * Website Notify me of new posts by email.