Creating a Fancy menu using CSS3 and jQuery

Tutorials, Works

Creating a Fancy menu using CSS3 and jQuery

Feb 08, 2010 insic 103 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.

LIVE DEMO DOWNLOAD

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>

<ul>

<li><a href="">About</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>

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;
}

.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;
    }

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;
}

.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;
        
    });

});

$(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);
	
}

.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.

LIVE DEMO DOWNLOAD

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.

Zemanta

http://jonasluthi.com Jonas

Very good tutorial Can I translate it into French for my blog (xoodeo.com) ?
http://joshbetz.com Josh Betz

I love it. I’m thinking of a way to incorporate it into a couple of sites that I’m working on. Thanks.
http://richworks.in Richie

Wow… Very nice. I love the colors and the appearance. Awesome tutorial. Thanks a lot
http://night-fairy-tales.com/ SM

Nice tutorial. Thanks
nb

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 ?
- http://blog.insicdesigns.com insic2.0
  
  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.
http://NickGeek.com Nick the Geek

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.
http://www.aledesign.it aledesign.it

Nice tutorial..I try make something in my nexts works! Thanks!
http://www.yummygum.nl Vince

Nice tutorial. Interesting combination of jQuery and CSS3. I might use some of that jQuery soon.
Pingback: Creating a Fancy menu using CSS3 and jQuery | INSIC DESIGNS » Web Design
Pingback: Creating a Fancy menu using CSS3 and jQuery | INSIC DESIGNS « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit
Pingback: 網站製作學習誌 » [Web] 連結分享
Pingback: Creating a Fancy menu using CSS3 and jQuery | INSIC DESIGNS : Popular Links : eConsultant
http://www.bloggerden.com/ Blogger Den

Really awesome article dude! Useful for designing creative menus for websites, I’ll have to try it out.
http://www.ivellios.tk JK Ivellios

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
Pingback: Creating a Fancy menu using CSS3 and jQuery | INSIC DESIGNS » Web Design
Pingback: Top Worthwhile Tutorials of the Week – #2 | AEXT.NET
Pingback: Articles of the Week 2/14 « Andy's Blog
lebisol

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!
Pingback: Creating a Fancy menu using CSS3 and jQuery « Designdefine's Blog
http://erpasoleh.wordpress.com Erpasoleh

Running well, good job

hatur nuhun
Pingback: Fancy menú CSS3
Patricia

Looks great and I would love to try, but the download link is broken.
http://music.jeezjaz.com ฟังเพลง

Thanks for tutorial
Pingback: Fancy menú CSS3- Noticias del Cerebro Digital
Pingback: [Web] 連結分享 | Geek is a Lift-Style.
Pingback: Demostración de un Menu en CSS3
http://www.ngicreative.com Tom Black

Very slick indeed. Another great tutorial!
Pingback: Tự tạo lavalamp menu sử dụng CSS3 và jQuery : Freelancers.vn – Hành Trang cho Freelancers
Pingback: TOPGFX » Blog Archive » 9 Extremely Cool CSS3-Jquery Navigation Menu Tutorials
Pingback: adketing.com » Fancy menú CSS3
Pingback: Samuel Velázquez » Fancy menú CSS3
Craig

Can you explain how to modify this to be a vertical menu.
Pingback: Los mejores tutoriales y recursos para hacer tus barras de navegación | SummArg
Pingback: Fancy menú CSS3 » Letmon.com
Blitz

This is really great and a nice development of the Ganesh code. I have one odd issue. That is that it prevents the menu links from working.

They show up in the status bar, but clicking ANY links on the page (not just menu) does nothing.
- http://blog.insicdesigns.com insic
  
  Just remove the return false in the click event in the js file.
http://twenitybox.blogspot.com/ Sora

i have the same problem with Blitz, and i just remove the return false in the click event in js file but it do nothing.
Pingback: jQuery Menus with Stunning Animations - Noupe Design Blog
Pingback: 24 תפריטים נפתחים עם אנימציות מדהימות מבוסס JQ « כשעיצוב וטכנולוגיה נפגשים
Pingback: Week in Web: jQuery Menus, Flowplayer update, Stylesheet removal, drop shadows, Gury, Sliders, etc | Sean Walther’s Blog
Pingback: Melhores links da semana #1 | DicasWP
Pingback: 劲爆眼球的jquery菜单特效 - 未分类 - html jquery - 数据抓取/信息管理/网站分析
Pingback: Menus jquery con animaciones :digilabs.com.ar
Pingback: Collection Of jQuery Navigation Menus with Awesome Animations | Webwibe
boricotico

I found two problems for me.
1. Just works if the selected item is the first one.
2. Just works with the original width, when I changed it, no matter if the selected item was the first one, the hover didn’t work
Matt

How do you manually set a item as the “current” [active] one? I want to use this instead of my old tacky menu bar on my website. But if I cannot set a as active, I don’t think I will be able to =|

I tried this:
$(“#target”).siblings(‘li’).removeClass(‘active’); $(“#target”).addClass(‘active’);

But I need to hover over the menu before it will take effect. =-S
Levi Morrison

This tutorial is great, but it has some flaws. Try applying active to an li other than the first and you get bugs in the latest Chrome version (I did not test other browsers).

Here’s a jsfiddle that fixes this problem as well as optimizes performance (though performance in most instances will be negligible): http://jsfiddle.net/morrison/4CU4H/
- Levi Morrison
  
  I forgot to note that the bug is partly due to translate(); my version unfortunately removes this ‘functionality’ of css3.
- Paul
  
  This lavalamp.js? Now does not work…(
Pingback: Floating Bubble Lavalamp Menu Using Just Css3 And jQuery | Paul Crowe
Sergey

Works fine. Very good for demonstration on CSS3-capable browsers or as an initial template. But it would be better to introduce the multybrowser code. I mean the IE6-7-8-9 are forgotten and so the code needs some finalization.
- Blitz
  
  IE6??? Oh yeah, let’s code with tables, use animated GIFs (of rainbows) and comic sans as a final touch!
  
  Oh by the way. I’m really sad this tutorial doesn’t work on Netscape Navigator!
  
  C’mon people, it’s 2011!
http://www.facebook.com Muhammad Yaseen

Hi to all this is Awesome Tutorial with some Issues but i fixed it… Happy Coding
http://www.victheme.com VicTheme

Thanks for sharing…
I’ve also created a lavalamp menu using Drupal module which can be view here http://www.victheme.com/demo_product/7
if it’s Ok and welcome for any review or comments:)
razor

Your syntax highlighter is screwing some text, and displays “bottombottom” on the webkit gradients. Took me some time

Other than that, great menu!
Pingback: 牧童前端-记录前端设计的那点事
http://www.diinero.com Bumb

hey thanks for that amazing menu!! I have a problem, it only works properly when I am in the Home Page. If I change the active link, for example in here: http://diinero.com/WebsParaGanarDinero/
the shadow goes out and won´t follow the mouse movement.

How can I solve it??

Thanks
- Matt
  
  Have you switched to Levi Morrison’s modified code?
http://diinero.com/WebsParaGanarDinero/ Carlos

Please go to my website and tell me what can i do to fix my menu

Thanks¡¡
http://diinero.com Bumb

I have switched to Levi Morrison´s code and it doesn´t work either…
Pingback: 28 CSS/Javascript Plugins and Coding Techniques | 1 step web design
Thiago

Excelente Menu. Obrigado por compartilhar conosco.

Do Brasil.
Pingback: Creando un Menú Fancy con CSS3 y jQuery - ScriptandoBlog
Pingback: +108 Free CSS Menu Designs {Mega Menu, Dropdown, Horizontal, Vertical} from Ginva | Lake of Web
Pingback: CSS3 Jquery Navigation Menu Plugins « Blog I.T. Mark
Martriay

Awesome, I love it! Any idea for submenu?
http://www.robsteele.co.uk rob

sweet menu thanks!!
Renee

Bumb I am having the same problem!

It works fine until i change the active link for a different page.

After which the lava part which follows the mouse moves over to the right and wont sit on the menu links properly
Renee

Oh and levi your js did not fix my problem :/
Pingback: Web Design 使用CSS3和jQuery创建一个奇特的菜单
Pingback: Kỹ thuật lập trình .com » Jquery Effect » 100 Awesome CSS/Javascript Plugins and Coding Techniques
http://www.inhimak.com Tiffany John

Hi, Nice work but not working properly in any IE. Do you have some solution for IE?
http://www.ladything.com ram

fantastic menu design – Plan to use it on my website – horizontal submenu added along with this would be perfect
Pingback: 20 Best Tutorial to create Beautiful CSS menu | easytechtips.net
Pingback: Backlink Center » 30 Amazingly Great CSS Menu Tutorials
http://www.shilfti.com.br Mauricio

Opera and IE
http://www.itcentrix.co.uk Jameel

Can some1 turn it into a drop down menu as well?
Pingback: jQuery and CSS Menus with Animations « Swadesh's Technology Blog
Pingback: jQuery and CSS Menus with Animations « CSS Tips
SAMANTHA

No works mozilla firefox .(
http://www.markuphome.com Ijaz

Looks fine but i found a issue when click on any menu item its URL not working
Pingback: Подборка CSS3 меню |
http://www.denvernetworks.com it consulting

Hi,to all this is Awesome Tutorial with some Issue.This is really great and a nice development of the Ganesha code. I have one odd issue. That is that it prevents the menu links from working.thanks again…
http://www.jorgerey.es Jorge rey

To solve the problem “URL not working” you have to put “return true” in the function “. Click (function ()” Example:

. click (function () {

$ (this). siblings (‘li’). removeClass (‘active’);

$ (this). addClass (‘active’);

return true;

});
- Paul
  
  I did, still does not work
CoRn

in Download Button the link it’s not available. Some one can send me the files or fix the link? thank:
to sandy399@hotmail.com
Evan

Sorry but the download button (http://insicdesigns.com/download/fancy-menu.zip) does not work
Pingback: 20 Best Tutorial to Create Beautiful CSS menu | SEO Approved
Pingback: 25 Neat CSS3/Javascript Plugins and Coding Techniques That Will Boost Your Productivity | Design Superstars
deisy

disculpa para ver si me pueden ayudar ya que los Home no me funcionan agradezco su pronta respuesta.
gracias
Pingback: Melhores links da semana #1 - Technoleg
Ariel

No me funciona class active
Pingback: anticode
Gabriel

Todo esta muy lindo pero no entiendo porque no funcionan las anclas, el navegador marca la dirección que le di pero no hacen nada al darle click
Pingback: Harika Css3 & jQuery Menüler | DeMiRcAn
http://mintik.com Ali

Very nice menu. Thanks.
alexis

cuando le doy click al enlace no se dirige a el, por favor me pueden decir como…
http://www.harsha.com harsha

good
Pablo

THANKS! just what i was looking for.
Pingback: Blue Sky : Aditya Subawa
Pingback: 108 Free CSS Menu Designs {Mega Menu, Dropdown, Horizontal, Vertical} – DESIGNTOOLEXPERT
Imam

how if we have sub menu ?

Creating a Fancy menu using CSS3 and jQuery

The HTML Markup

The CSS

The Javascript

About the author: insic

Related Post

Postcard Design Tutorials and Inspirations

List of Responsive Grid System Frameworks

High Quality Responsive Image Gallery Plugins and Tutorials

A Quick Look Inside the New MySpace

EpicEditor – An Embeddable JavaScript Markdown Editor

Friends

About

Creating a Fancy menu using CSS3 and jQuery

The HTML Markup

The CSS

The Javascript

About the author: insic

Related Post

Share

Postcard Design Tutorials and Inspirations

List of Responsive Grid System Frameworks

High Quality Responsive Image Gallery Plugins and Tutorials

A Quick Look Inside the New MySpace

EpicEditor – An Embeddable JavaScript Markdown Editor

Popular Posts

Friends

About