Pure CSS3 Vertial Animated Menu

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

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:

    Download: http://www.htmldrive.net/items/download/1098

    Be Sociable, Share!

    Leave a comment