Beautiful CSS3 Menu Effects

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.

css3 menu effects


Using and extending

Your page should include both menu-effects.css and menu-effect.js. The latter is optionnal but makes the animation run progressively.

Your menus should be marked with .menu & .submenu classes, and an effect specific class such as .fly:

<ul class="menu">
    <li>My submenu will fly!
        <ul class="submenu fly">
            <li>flying item 1</li>
            <li>flying item 2</li>
    <li>My submenu will pop!
        <ul class="submenu pop">
            <li>popping item 1</li>
            <li>popping item 2</li>

You are welcome to fork and create new effects on github.

You may also like...

1 Response

  1. azadweb says:

    its awesome…
    tnx for sharing
    good job.

Leave a Reply

Your email address will not be published. Required fields are marked *