Pure CSS3 LavaLamp Menu
I think that you have already seen animated menus with LavaLamp effect (based on jQuery plugin). Today I would like you to tell how to repeat same behavior only with CSS3 (without any javascript). I have to use CSS3 transitions in our menu (to animate elements). So, if you are ready, lets start.
Here are samples and downloadable package:
Live Demo
download in package
Ok, download the sources and lets start coding !
Step 1. HTML
As usual, we start with the HTML. Here is the html code of our menu. As usual – this is again UL-LI based navigation menu. The most interesting thing will be CSS styles of course.
index.html
<ul id="nav">
<li><a href="http://www.script-tutorials.com/">Home</a></li>
<li><a class="hsubs" href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="http://www.script-tutorials.com/pure-css3-lavalamp-menu/">Back</a></li>
<div id="lavalamp"></div>
</ul>
Step 2. CSS
Here are the CSS styles of our LavaLamp menu.
css/menu.css
#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
background: url('menu_bg.png') no-repeat scroll 0 0 transparent;
clear: both;
font-size: 12px;
height: 58px;
padding: 0 0 0 9px;
position: relative;
width: 957px;
}
#nav ul {
background-color: #222;
border:1px solid #222;
border-radius: 0 5px 5px 5px;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: -9999px;
overflow: hidden;
position: absolute;
top: -9999px;
z-index: 2;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.1s linear;
-ms-transition: -ms-transform 0.1s linear;
-o-transition: -o-transform 0.1s linear;
-webkit-transition: -webkit-transform 0.1s linear;
transition: transform 0.1s linear;
}
#nav li {
background: url('menu_line.png') no-repeat scroll right 5px transparent;
float: left;
position: relative;
}
#nav li a {
color: #FFFFFF;
display: block;
float: left;
font-weight: normal;
height: 30px;
padding: 23px 20px 0;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
background: none repeat scroll 0 0 #121212;
outline: 0 none;
}
#nav li:hover ul.subs {
left: 0;
top: 53px;
width: 180px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
#nav ul li {
background: none;
width: 100%;
}
#nav ul li a {
float: none;
}
#nav ul li:hover > a {
background-color: #121212;
color: #00B4FF;
}
#lavalamp {
background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
height: 16px;
left: 13px;
position: absolute;
top: 0px;
width: 64px;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
#lavalamp:hover {
-moz-transition-duration: 3000s;
-ms-transition-duration: 3000s;
-o-transition-duration: 3000s;
-webkit-transition-duration: 3000s;
transition-duration: 3000s;
}
#nav li:nth-of-type(1):hover ~ #lavalamp {
left: 13px;
}
#nav li:nth-of-type(2):hover ~ #lavalamp {
left: 90px;
}
#nav li:nth-of-type(3):hover ~ #lavalamp {
left: 170px;
}
#nav li:nth-of-type(4):hover ~ #lavalamp {
left: 250px;
}
#nav li:nth-of-type(5):hover ~ #lavalamp {
left: 330px;
}
#nav li:nth-of-type(6):hover ~ #lavalamp {
left: 410px;
}
#nav li:nth-of-type(7):hover ~ #lavalamp {
left: 490px;
}
#nav li:nth-of-type(8):hover ~ #lavalamp {
left: 565px;
}
Live Demo
download in package
Conclusion
Hope you enjoyed with our new CSS3 menu, don’t forget to tell thanks and leave a comment 
Good luck!
Related Articles
CSS3 multicolor menu
CSS3 vertical multicolor 3D menu
Flying CSS3 Navigation Menu
I really like the demo. A simple, yet clean menu system. It’s really fast. Thanks.
Beautiful! I decided to use this for my application, but instead of text links, I want a drop down menu on an profile image on the top right corner. The way the drop-down menu drops is eclipsed by the screen in my case (see image attached.) Tried fiddling around with CSS to make the menu drop from the right instead of the left. Help?
http://i.imgur.com/KF7Zb.png
Hello Rami,
You can apply next CSS changes:
#nav li:hover ul.subs {
-moz-transform: scaleY(1);
left: -100px;
top: 53px;
width: 180px;
}
Hello admin, can you change this black css3 lavalamp menu in to white color?
Because i love white color, my template color is white.
Hello Salman,
I can of course, but, it will require changing all our styles and images
We have to revert all our colors. Does it mean publish it as new one tutorial, or, do you like it as custom job?
This is amazing! I would love to implement it on a site i’m working on, but I’ve noticed a few bugs. It only works on Chrome for me, no other web browser. Also, in Chrome, when you refresh the page, the navbar does not preform as it’s intended. The little slider doesn’t follow the mouse.
Is there perhaps an updated version somewhere I don’t know about?
It correctly works over here: http://www.elegantthemes.com/demo/?theme=Polished but not in the demo.
Thanks!
Hi Kamil,
Don’t forget, they use javascript, in our case – pure CSS3. I will try to resolve this strange behavior in Chrome.
LavaLamp – cool
Menu – Yes
LavaLamp Menu – no!
Did this menu can show letter like Č.Ć Š etc.
If can how to add option to do that.
By the way you do great jobe.
Bravo
Hi Marko,
Yes, sure, you can use custom symbols (UTF8). You should save result HTML in UTF8 mode. That’s all.
And yes, you can customize css styles as well.
Can I fit menu background line with menu buttons?
I successfully dropped this into a wordpress test site and my only problem with this how to highlight the current page with the correct positioning of the ‘lavalamp.png’ — A possible solution is to just create a separate style sheet for each main page with the position changed accordingly, but perhaps I’m missing an even easier solution?
Hello TGrace,
Generally yes, you are right. I haven’t prepared styles to keep selected element. So, we should prepare them, with adding similar styles as :hover-ed selectors.
This are styles from lines: 61, 64, 86 etc.
How to make the lavalamp stay on the selected menu ?
When i click a menu option (like “Menu 2″) the lavalamp goes back to “Home”…how do i make it stay on “Menu 2″ after I clicked it?
thanks:D
Hey,
This is absolutely brilliants. This is just what I’ve been looking for. Would you by any chance would know how to make it have an “active” state?
Thanks
Awesome use of CCS! can i use our CSS codes on a website hosted by me??
Hello Abhenav,
Yes, you can of course, it is free in case of personal use.
Gr8 design!! but how to remove the empty space at the end of buttons? also how to adjust it at the centre of the webpage? it’s aligned left at the moment..
Hello joseph,
this menu is aligned to the left because all the elements of this menu have property: float:left.
You can remove that empty space with several ways: a) you can make buttons bigger b) you can make #nav width smaller, c) you can add more elements into the menu.
How to make the lavalamp stay on the selected menu ?
When i click a menu option (like “Menu 2″) the lavalamp goes back to “Home”…how do i make it stay on “Menu 2″ after I clicked it?
thanks:D
Hello Alex,
Thank you for your comment. This is interesting question of course. But, this is still possible.
Basically you should change Left position for base #lavalamp element. Try to play with it.
How to get the lists centered?
Hello John,
In order to center the list, you should define certain width for menu and add auto margins (margin: 0 auto).
(as example)
I am a freelance Web Designer and wanted to know are all these jqueres free to use for my clients or are they copyrighted.
Thank you
Michael
Hello Michael,
There is no any javascript (jquery) in this css3-based lavalamp menu. This is pure CSS3
Do you know any jquere code for my html 5 mobile game, I can use to not scale canvas for android when you touch or pinch. Meta tags do not work.
Thanks
Michael
You always can use html-based menu for your application (mobile game). What do you think?
Hi Admin,
Im just wondering if this menu can change to 3 layers.
Right now it only has two (menu1–>submenu)
is that possible to add the third layer?
Thank you.
Hello Nick,
Yes, of course this is possible, but it requires preparing new styles for all the nested levels (because we have to display it at the left of submenu element as example)
Hallo admin,
I love it, but, in FF 14.0.1 it works only sometimes. I can see the pulldown menue but I can´t go over (sometimes)
It works perfekt on Safari and Chrome.
Hello Manfred,
This is strange, because I’ve had exactly the same version of FF (14.01). Firefox is the main browser for me (with Firebug of course). Usually I never develop new scripts in other browsers.
.. Try to change Top position for ‘#nav li:hover ul.subs’. From 53px to 51px. I hope that it can help.
Hi Admin,
You have hsub called as a class in the HTML but not in the CSS.
Hi Compass,
Yes, you are right, this is made for further customization (so you can customize this A element if need)
there’s a bug in chrome…
it happens after page load or when you refresh the browser then hover first the mouse on any last List Item except first and second item.
the lavalamp behavior is incorrect, it does not stop on the selected item.
Thank you Dennis for your remark, you are right.
All because all our elements are 1-indexed instead of 0-indexed. Therefore, our children elements aren’t matched at all.
But, I’ve found a solution, we should replace all :nth-child to :nth-of-type, check my corrections in the post.
no jquery really its cool thx for sharing this useful code.
Really……………. awesome tutorial. i want to give u my best regards and many many thanks for it.
also i want to know is any way this work on IE8?
hello. what can i do to realign the lavalamp the pointer is off in some links?
Hi neewb,
It is pretty easy, you have to change initial styles of #lavalamp (at line 90). As example, you can change 13px to 565px in order to point it to the last element.
This menu is not working in firefox 16.0.2 ??? Please help.Its urgent. and I love this demo and dont want to change with another menu
Hi Krups,
What do you mean? It should work in FF certainly. I always develop all my demos only in FF (by default)
Hi, Admin, Thank you for your menu! I would say that if someone does not work in the menu Firefox (sub menu) I removed from the class “# nav ul” these lines and I have all worked! Thank you!
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.1s linear;
-ms-transition: -ms-transform 0.1s linear;
-o-transition: -o-transform 0.1s linear;
-webkit-transition: -webkit-transform 0.1s linear;
transition: transform 0.1s linear;
did u test it on mozilla n chrome? lavalamp.png placement is made center in each menu item…its ok with chrome..but when i cheked this demo on mozilla firefox lavalamp.png wasnt placed center with respect to the menu items…
Hello aditya,
This image (lavalamp.png) should be centered accordingly to every selected element. It should be similar in all browsers: Chrome, FF, Safari and even in IE (this menu works in IE too, but not so smoothly)
Just want to point it out, you lavalamp on the demo works well but sometime it doesn’t work in the packpage
Hello Oscar,
Yes, sorry, I just forgot to update our package, now it is updated accordingly with recent changes.
Great tutorial.
fuck IE, fuck old browsers. The future is HTML5 and CSS3.
I have a solution to the problem of the selected menu or active.
create N css classes. example:
active_menu1
active_menu2
set on menu active, your respective class:
(li class=”active_menu2″) menu 2 (/li)
now modified css file, add “.active_menuX ~ #lavalamp{position}”
example:
.active_menu2 ~ #lavalamp {
left: 90px;
width: 75px;
}
It’s working.
Thank you Arthur for your example, it should be useful for people!
Great Menu!
I just stucked with the same problem – how to fix the CSS to let the graphic element stay on selected menu point?
Admin wrote: “So, we should prepare them, with adding similar styles as :hover-ed selectors.” But I don’t know how.
Did somebody solved that?
How about a 3rd/Nth level flyout? How would you implement something like that.
Hi AT,
As usual. First – we need to add extra UL level with own childs, in this case, whole DOM can be like:
<ul id="nav"> -> LI -> UL -> LI (2nd level children) -> UL -> LI (third level children).
And after – we will need just add a bit of CSS styles to display that third level at the right of second level (as example)
I have developed it, built-in javascript, not using css, to fix the position of div # lavalamp, people can refer http://www.giasutoanhoc.com.
$(“#nav > li”).each(function (index) {
if (index == 0)
return;
var left = 0;
$(this).hover(function () {
for (var i = 0; i li’).eq(i).innerWidth() / 2) – 32;
else
left = left + $(‘#nav > li’).eq(i).innerWidth();
}
$(‘#lavalamp’).css(‘left’, left + “px”);
}, function () {
left = 0;
$(‘#lavalamp’).css(‘left’, “16px”);
});
});
Thank you for your participation here.
Great tutorial , and thanks for the menu
Hai admin,
i ‘m using this lavalamp its work in ff but not in ie 7 because the please check in ie version 7,please find the solution and reply me please. i’m awaiting ur reply
Hi Sadashiv,
In IE7? Ohh, maybe it is the very time to forget about so out of date browser?
This browser doesn’t support CSS3 at all, you will need to rewrite a lot of code to adjust it for this browser
Nice menu!
Very nice and neat! With these css, I can remove some of my javascript codes and make my site faster! thanks a lot for this one!
Hi,
I’m not a pro and can’t figure where to set default selected item. It always goes to Home. Please help. Thanks.
Hello GB,
Arthur already answered your question, please refer to his answer
nice very nice……i thought to make a slide sown menu like this i has to learn jquery lol…
btw how do i align it in header section??? please reply and thank you
Hello Jayanta,
How to align? I think, that firebug it the main tool for you!
Hello I am trying to get it working on my website very nice menu. But the lavalamp seems to be flowing behind the mouse a tab or two. Doesn’t keep up
if you look on my website http://www.mwbcomputers.com.au you can see what I mean. I am just getting my website design sorted out thought start doing the hard part first.
This is my php code instead of html. But using the menu.css nothing change on that.
<a href="">
<?php for ($i = 0; $i
<?php for (; $i
<a class="subs" href="">
...
..
sorry didn’t show code well sample of php on here http://codepen.io/mwbcomputers/pen/yKvfG
Hello Matthew,
I noticed that you use reverse logic in your code (you write php code inside html), well, I think that you made one or few mistakes in your php. Pay attention, you put DIV element before you start enumerating your childs (for what is that DIV?), Then, after Foreach you added UL with class ‘subs’. I think that it should be here, it should be before Foreach cycle.
how to add more sub in subs class?
* Contact Us
* Customer Service
* Maps
* Branch
* Regional
* International
Hi Aris,
If you need to add more subs (childs) – just add them
Hi admin, when i add this dropdown menu, my website load very slow, so i want to remove the lavalamp, what should i do, thanks in advance
Hello Alexandre,
The size (html+css size) of this menu is so small, so it mustn’t have affected to a website load speed