Pure CSS3 LavaLamp Menu

Pure CSS3 LavaLamp Menu

113 11155
Pure CSS3 LavaLamp Menu
Pure CSS3 LavaLamp Menu

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

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

Conclusion

Hope you enjoyed with our new CSS3 menu, don’t forget to tell thanks and leave a comment :) Good luck!

SIMILAR ARTICLES

Practice with Text Shadows

0 268
Responsive HTML Email Template

0 482

113 COMMENTS

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

      • 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

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

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

  4. Hi,
    I’m not a pro and can’t figure where to set default selected item. It always goes to Home. Please help. Thanks.

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

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

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

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

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

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

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

  12. Thank you Andrew,

    Great simple menu.
    Thank you to Arthur Assuncao for pointing me in the right direction for making pages active.

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

    • 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

  14. Thenq for the code.. work like charm on my website…. with menu hover awesome….

    Thanks with Regards
    Abdul Munaf Ahad

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

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

    • Hi Stefan,
      I have the same version exactly as yours, however I haven’t noticed your problem, maybe others will suggest something

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

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

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

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

Leave a Reply