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

DEMO DOWNLOAD


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>
            ...
        </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.

About This Author

I am Petia Koleva (aka scarletish) and I am doing web and graphic design. I also like to experiment in infographics and motion graphics design. I graduated @Gray's School of Art in Aberdeen, Scotland - BDes (Hon) Design for Digital Media. I have two design awards: BP Design Award 2012 @ Gray's School of Art and RGU Purchase Prize Award. I am very passionate about design and I share my passion on designify.me.

1 Comment

You can post comments in this post.


  • hi…
    its awesome…
    tnx for sharing
    good job.

    azadweb 1 year ago Reply


Post A Reply