CSS 3 Animated Menu

View Demo Download CSS

UPDATE

I have released a new version. You no longer have to update the width everywhere, just set the desired size by giving a value to the ul.nice-menu class. The old version is still available for download from here

This short script will show you how to create a colorful, yet simple and elegant navigation menu using nothing but CSS 3. Since the latest version of CSS and mainly it’s animation part is not supported by all ‘major’ browsers the code below will not be working in these browsers, instead it is going to nicely degrade to a similar but inanimated one.

The HTML

Home
About
Portfolio
Blog
Contact
What not?

As you can see the HTML code is quite simple, just an ordinary list filled with anchor elements. Only the main nice-menu class is necessary, the rest is the coloring which is optional. Six colors are available by default: red, orange, green, blue, bright, dark.

Styling

CSS 3 introduced a set of new properties which makes designer’s life even more easier. With these properties you can substitute many of the plain old javascript framework solutions unless you mind those pesky IE browsers. You can read more about CSS animations at Brad Shaw’s amazing website

I’ve implemented two kind of animations: the default one with ease-in and out, and another one with bounce-in and out. To use the latter one you just have to add the bounce class to the ul:

There is one more additional class that you can use: tight, which removes the space between list elements.

Conclusion

Thanks for stopping by. Please feel free to download and customize the code, also I would be grateful for leaving your feedback in the comment section below.