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
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://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://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!

Enjoyed this Post?

Stay connected with us:

If you enjoyed this article, feel free to share our tutorial with your friends.

98 thoughts on “Pure CSS3 LavaLamp Menu

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

  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

  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

    • admin May 7, 2013 at 2:48 am - Reply Author

      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. how to add more sub in subs class?

    * Contact Us
    * Customer Service
    * Maps
    * Branch
    * Regional
    * International

  8. Alexandre Patrov April 25, 2013 at 7:01 am - Reply

    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

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

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

  11. Cjay The Explorer July 24, 2013 at 3:10 am - Reply

    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

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

  13. Thank you Andrew,

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

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

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

    Thanks with Regards
    Abdul Munaf Ahad

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

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

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

Leave a Reply to Abdul Munaf Cancel reply

Your email address will not be published. Required fields are marked *

*

     

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>