Creating a Fancy menu using CSS3 and jQuery
08. Feb, 2010 
19 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
<div class="lavalamp" > <ul> <li class="active"><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Blog</a></li> <li><a href="">Services</a></li> <li><a href="">Portfolio</a></li> <li><a href="">Contacts</a></li> <li><a href="">Back to Article</a></li> <li><a href="">How it Works?</a></li> </ul> <div class="floatr"></div> </div>
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.
.lavalamp {
position: relative;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border-radius : 10px;
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
background : -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204));
height: 18px;
}
The CSS code for the menu item.
ul {
margin: 0;
padding: 0;
z-index: 300;
position: absolute;
}
ul li {
list-style: none;
float:left;
text-align: center;
}
ul li a {
padding: 0 20px;
text-align: center;
}
The CSS code for our floating/animated div element.
.floatr {
position: absolute;
top: 10px;
z-index: 50;
width: 70px;
height: 30px;
border-radius : 8px;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
background : rgba(0,0,0,.20);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
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.
$(document).ready(function () {
//get the current position of the active item
var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left;
var dwidth = $('.lavalamp li.active').width() + "px";
//apply the current position of active item to our floatr element
$('.floatr').css({
"left": dleft+"px",
"width": dwidth
});
$('.lavalamp li').hover(function(){
var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + 15);
var width = $(this).width() + "px";
var sictranslate = "translate("+left+"px, 0px)";
$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});
},
function(){
var left = $(this).siblings('li.active').offset().left - ($(this).parents('.lavalamp').offset().left + 15);
var width = $(this).siblings('li.active').width() + "px";
var sictranslate = "translate("+left+"px, 0px)";
$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});
}).click(function(){
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
return false;
});
});
Add more variety of colors to our menu.
.magenta {
background : rgb(190,64,120);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
background : -moz-linear-gradient(top,rgb(190,64,120), rgb(177,24,91));
border: 1px solid #841144;
}
.cyan {
background : rgb(64,181,197);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
background : -moz-linear-gradient(top, rgb(64,181,197), rgb(7,165,187));
border: 1px solid #2f8893;
}
.yellow {
background : rgb(255,199,79);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
background : -moz-linear-gradient(top, rgb(255,199,79), rgb(255,188,43));
border: 1px solid #c08c1f;
}
.orange {
background : rgb(255,133,64);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
background : -moz-linear-gradient(top, rgb(255,133,64), rgb(255,107,24));
border: 1px solid #c04f11;
}
.dark {
background : rgb(89,89,89);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
background : -moz-linear-gradient(top, rgb(89,89,89), rgb(54,54,54));
border: 1px solid #272727;
}
.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.40);
}
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.
I’m a Web Developer and Designer from Cebu City, Philippines. I am good at Wordpress, CodeIgniter, PHP, mySQL, jQuery and a standard compliant XHTML and CSS.
Very good tutorial
Can I translate it into French for my blog (xoodeo.com) ?
I love it. I’m thinking of a way to incorporate it into a couple of sites that I’m working on. Thanks.
Wow… Very nice. I love the colors and the appearance. Awesome tutorial. Thanks a lot
Nice tutorial. Thanks
wow… thanks for making a tutorial that doesn’t work with firefox nor IE (= broken on 80% of people’s computer), way to go… and people want to translate this ? and your blog is about web developpement ?
Yes I know it from the start.
And I think everybody knows that CSS3 is not supported yet in every browser. I just intend to show the capabilities of its new features. 
Thanks for your comment.
I like the options that are available with the new CSS version. I have been able to pull off the same effects using png, java, and some none standard css. It is very frustrating at times because you can get things looking great in most browsers but then it breaks in IE (or another browser but let’s be honest it’s usually IE). Of course I don’t know if that will fix with CSS3, but I should be able to eliminate a good deal of code which is always a good thing.
So will the transition property replace JS easing? What about “bounce?” I opened the demo in Chrome and the sliding transition was nice, but I kinda like the original lavalamp where it bounces slightly past and then back.
Anyways, nice demo.
Nice tutorial..I try make something in my nexts works! Thanks!
Nice tutorial. Interesting combination of jQuery and CSS3. I might use some of that jQuery soon.
Really awesome article dude! Useful for designing creative menus for websites, I’ll have to try it out.
Nice, but it is not working in Opera (shadow moves about 20-30 px right then stops. In FF no animation at all, but shadow is all right. In Safari and Chrome awsome
Very nice,
Too bad it will be lightyears before we get to safely use this cross-browser.
…but Rome was not built a day…keep it up!