I think that you have already seen various animated menus with LavaLamp effect (based on jQuery plugin). Today I would like to tell you how to repeat the same behavior only with CSS3 (without any javascript). I had to use CSS3 transitions in our menu (to animate elements). So, if you are ready, let’s start.
Here are samples and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
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="https://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="https://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
Conclusion
Hope you enjoyed with our new CSS3 menu, don’t forget to tell thanks and leave a comment :) Good luck!
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.
i use lavalamp menu style in my Registraion.jsp page but it work slowly in case of slide bar when i move mouse pointer over from one menu to anohter it move slowly plz help me in such problem
Great tutorial , and thanks for the menu :D
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, nice tutorial , thnQ so uch, but here i have problem, i didnt get menu i con when mouse over the curser. how???
pls tell me
Hi Swapna,
Please, correct your english, it’s difficult to understand you. What icon do you mean?
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 :D
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 Aris,
Very simple HTML. Copy all of the code from line 4 to line 10. Now in any line that ends with </a></li> paste in between </a> and </li>
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 :D
Hello Alexandre,
The size (html+css size) of this menu is so small, so it mustn’t have affected to a website load speed
Hi. Can I use this for my online website, so everyone else can see it too? Or do I have to give some credits for it? If it is not copyrighted. I don’t want to use copyrighted content.
Hi, please refer to https://www.script-tutorials.com/terms-of-use/
Another Drowdown, that dosent close , wen i move out the menu or i clik , without change the page:(
Is theri no working dropdown menu outside running full unter apple devices like iphone or ipad?
:(
Hi Stefan, you are wrong, in order to close a dropdown, you have to move your mouse out of that dropdown, easy enough
Can I add ease out effect in dropdown?
Hello shaz, Yes, you can, I do not restrict you to do it
Layout of your Menu is Awesome but I Like this kind of Dropdown or li
I really need to include this in my website. I saw someone has given a solution for the pointer position using javascript. But I don’t know where to put the code. Can you help with it? Thank you.
Hi Charitha,
Javascript? But for what? It is not required with this menu.
Hi Sir.. Can You Help Me in The 2nd Lvl and 3rd Level Sub flyout? with Css codes Pls :(
I need it for my Website School Project :( (Using This Lava Lamp Menu)(im not Good at English sorry :[)
Hi Cjay, Currently, this is 2-level menu. If you want to add 3-rd level, you will need to add styles for the third level
flying CSS3 menu is not supporting the flash moments in IE. Could you please help on this how to activate that menu in IE Versions.
Hi veera, It works great in IE10
Thank you Andrew,
Great simple menu.
Thank you to Arthur Assuncao for pointing me in the right direction for making pages active.
Hi admin thanks for the tutorial….can you help on how to add form (such as input , text field, button) into pseudo elements please ?
Hi Sandip,
Pseudo elements are used to access elements of your page (DOM). If you need to get access to elements of your ready form using pseudo elements – this is possible. But, your statement about ‘add form into pseudo elements’ sounds illogical.
Is there a way of positioning the lamp on over without using the nth-of-type?
Hi Xiso,
I am not sure, there is no way to access to adjacent elements using CSS1-2, only in the third version this possibility was added
How to set the selected menu or asset?
Help please!
Hi Alejandro,
Arthur Assuncao already told us how to do it
Thenq for the code.. work like charm on my website…. with menu hover awesome….
Thanks with Regards
Abdul Munaf Ahad
I’m changing my web and I will implement the lavalamp menu, but i want to know if is possible stop the lamp at the active site button , and when you click in another menu button the lamp do the movement and stop again
Hi Jose,
This is possible, you just need to add styles for active element. Arthur Assuncao already answered this question
I have a problem with this menu on Chrome “31.0.1650.63 m”. When i move mouse outside menu, but cursor is moving above lavalamp.png it does not go back to previous item. On IE it works fine.
Did anyone noticed that?
Oh, sorry, didn’t noticed those lines “#lavalamp:hover { -moz-transition-duration: 3000s;”…
What is a purpose of that? I have lavalamp.png under my menu and it is not so good when this lavalamp.png freezes :>.
The purpose of it is to freeze this element
Hi Stefan,
I have the same version exactly as yours, however I haven’t noticed your problem, maybe others will suggest something
Hi !
Very Nice menu (the lava lamp) !
Thanks a lot !!!
I wonder if you can give any tips om how to adjust the total width, without losing the position of the rounded corners for example.
Or even better – is it possible to make it responsive?
Hi Patrik,
To make it responsive, we will need to stop using images, we will need to implement all these styles with pure CSS3. I might prepare another tutorial about this in the future.
I dont Know why it stays vertical instead of horizontal :( Would you give me a hand with this?
Hi Vanesa,
Make sure that the CSS file is attached properly
Hello The menu is sick I love it however when I’m hovering over my tabs the lava lamp Icon doesn’t keep up it slacks because my tabs are longer. It works great on tabs like Home and Directory but when I get too Tournaments it doesn’t go far enough
How do I control the position where the menu is placed and minimize the amount of space that is underneath?
Hi Emmanuel,
The default position was already discussed earlier. Just check the comments.
This one is really awesome awesome CSS3 Menu. Liked the design.
png images used in css please?
Hi Gurdeep, All images are available in package (and accessible in demo)
I know this tutorial is a bit old, and maybe you’re on something new, but I have to bring your attention on the fact that the html of this menu is *not* w3c-compliant: you have a as direct child of a . I suggest you to change it to a , but some adjustments must be done, because #lavalamp can’t surcharge #nav li in the css. I suggest you use a class and not an id on the , therefore .nav li can be overriden by #lavalamp.
My bad, I didn’t see that the html was stripped in my comment. I suggested to replace “div” par “li”, for the element with id=”lavalamp”.
Hi Chaopale, you are right, I developed this demo more than 2 years ago. Currently I am deeply involved in 3D development (webgl), but I might have a look at this question in my free time, thanks for your attention.
Hii Admin.
Why do you think than i can´t see the images for URL in the css archive, in the drop down menu? thanks!
Hi Emilio, I don’t know, all images are in the ‘css’ folder of our package