Pure CSS3 LavaLamp Menu

Pure CSS3 LavaLamp Menu

113 35390
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="https://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://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!


113 COMMENTS

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

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

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

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

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

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

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

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

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

    • Hello John,
      In order to center the list, you should define certain width for menu and add auto margins (margin: 0 auto).
      (as example)

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

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

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

  13. 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 Compass,
      Yes, you are right, this is made for further customization (so you can customize this A element if need)

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

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

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

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

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

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

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

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

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

    • 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)

Leave a Reply to Arthur Assuncao Cancel reply