Tutorials, Works

Creating a Fancy menu using CSS3 and jQuery

Feb 08, 2010 insic 110 Comments

Fancy menu was made popular by devthought, it is develop on top of the Mootools library. And later a jQuery version of this menu called lavalamp was made popular by Ganesh. This time I will show you how to achieve the same effect using the CSS3 new features.

Note: Best viewed in a WebKit Browser (Safari and Chrome). This sample is just to demonstrate the capabilities of the new CSS3 features.

The HTML Markup

As best practice we have to use the list elements for the menu item. The <div class="floatr"></div> is the element we have to animate.

The CSS

The following block of code is used for styling our div with the class of lavalamp. Some of the CSS3 features used to style the element such as border-radius, box-shadow, rgba and gradient.

The CSS code for the menu item.

The CSS code for our floating/animated div element.

Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. The transition properties are used to animate smoothly from the old state to the new state over time.

Transition property syntax:

transition: property duration timing;

Property specifies the name of the CSS property to which the transition is applied. Duration defines the length of time that a transition takes and timing more like an easing function.

Read more about the transition property here.

The Javascript

The javascript role in this example is to get the current position of the active element and the mouse position when you are hovering our menu and apply the necessary css with corresponding value to our element we are going to animate.

What we need to do is to apply the transform property to our floatr element. Read more about the transform property and its functions here.

Add more variety of colors to our menu.

Our menu is now ready. See the menu in action or download the code for you to experiment.

Thanks for reading. Subscribe to my updates here for more.

Learn css tutorial with example.

About the author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.