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

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.


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.

Related post:  Achieving Great Website Design [Infographically Explained]
Divi WordPress Theme

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 *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.