Pure CSS3 Animated Lavalamp Menu for Blogger



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>
        </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.allbloggertricks.com/">Back</a></li>
    <div id="lavalamp"></div>
</ul>

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

4 comments:

  1. This comment has been removed by a blog administrator.

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

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

    ReplyDelete