Popular

Beautiful CSS3 Menu Effects


Advertisement

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.

 

 

You Might Also Like

2 comments
azadweb
azadweb

hi...

its awesome...

tnx for sharing

good job.

azadweb
azadweb

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