A great collection of CSS3 menu effects
A collection of menu effects, in pure CSS, which degrade gracefully in IE8. It is inspired from the Scroll Effects created by hakimel. There’s a “hardcoded” limit of 8 items per submenu. If you have more or much less than that, you should edit the
Progressive Anim section of the CSS. Some of the effects uses CSS 3D transform which only works in Webkit browsers but degrades gracefully in FF and other browsers.
Using and extending
Your page should include both
menu-effect.js. The latter is optionnal but makes the animation run progressively.
Your menus should be marked with
.submenu classes, and an effect specific class such as
<ul class="menu"> <li>My submenu will fly! <ul class="submenu fly"> <li>flying item 1</li> <li>flying item 2</li> ... </ul> </li> <li>My submenu will pop! <ul class="submenu pop"> <li>popping item 1</li> <li>popping item 2</li> ... </ul> </li> </ul>
You are welcome to fork and create new effects on github.