Pure CSS3 Animated Lavalamp Menu for Blogger

Posted On // 4 comments

You may have seen animated menus. Many animated menu uses Lavalamp (a Jquery Plugin) but today we are going to make a new menu which has animation like Lavalamp but without any Javascript.

The animation will take place with the help of CSS3 Transitions. The menu we will work on is black in color. On hover it becomes darker and a arrow appears above the menu text.

Live example of this menu can be seen by visiting the below link.

Below are the 2 simple steps on how you can add this menu to your blogger blog.

Step 1 : Adding the CSS

First go to Blog Title → Template → Edit HTML. Press Ctrl + F. Expand <b:skin>...</b:skin> if it is not expanded. Type ]]></b:skin> in search box and press enter key. [As per the new HTML editor]
Add the below given code just above ]]></b:skin>

#abt-nav,#abt-nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
#abt-nav {
    background: url('http://www.script-tutorials.com/demos/249/css/menu_bg.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 100%;
#abt-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;
#abt-nav li {
    background: url('http://www.script-tutorials.com/demos/249/css/menu_line.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;
#abt-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;
#abt-nav li:hover > a {
    color: #00B4FF;
#abt-nav li:hover, #abt-nav a:focus, #abt-nav a:hover, #abt-nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
#abt-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);
#abt-nav ul li {
    background: none;
    width: 100%;
#abt-nav ul li a {
    float: none;
#abt-nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;
#lavalamp {
    background: url('http://www.script-tutorials.com/demos/249/css/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;
#abt-nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 13px;
#abt-nav li:nth-of-type(2):hover ~ #lavalamp {
    left: 90px;
#abt-nav li:nth-of-type(3):hover ~ #lavalamp {
    left: 170px;
#abt-nav li:nth-of-type(4):hover ~ #lavalamp {
    left: 250px;
#abt-nav li:nth-of-type(5):hover ~ #lavalamp {
    left: 330px;
#abt-nav li:nth-of-type(6):hover ~ #lavalamp {
    left: 410px;
#abt-nav li:nth-of-type(7):hover ~ #lavalamp {
    left: 490px;
#abt-nav li:nth-of-type(8):hover ~ #lavalamp {
    left: 565px;

Save the Template. Now we just have to add the HTML

Step 2 : Adding the HTML

Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code and save the widget.

<ul id="abt-nav">
    <li><a href="http://www.allbloggertricks.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>
    <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>
    <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>
    <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.allbloggertricks.com/">Back</a></li>
    <div id="lavalamp"></div>

You just have to change the links and menu text. You are done now


24 April 2013 at 01:53
This comment has been removed by a blog administrator.
Rahul Rocks Author
25 April 2013 at 03:06

Thank You, Looks Awesome

4 November 2013 at 11:25

I've got a problem with this widget, when you place the cursor over the menu1 or 2 the sub menus aren't shown

niraj lathiya Author
23 January 2014 at 20:50

I've got a problem with this widget, when you place the cursor over the menu1 or 2 the sub menus aren't shown......you can see this problem on my blog......http://nvking.blogspot.in/


Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Pure CSS3 Animated Lavalamp Menu for Blogger |