Pure CSS Lavalamp Menu for Blogger

I think that you have already seen animated menus with the LavaLamp effect based on the jQuery plugin. Today I would like to tell and show you how to repeat same behavior, only with CSS3 without any JavaScript. I will use CSS3 transitions in our menu to animate elements.

Features

 - Simple but Stylish
 - Faster loading
 - Less usage of coding
 - Auto adjust with almost every blogger templates
 - Tested and runs with every latest Browsers
 - And more...............

 So, if you are ready, let's start.

DEMO

Add This Menu To Blogger

To add this Menu to your blogger blog follow below steps:
1. Go to Blogger Dashboard > Layout > Add a HTML/Javascript widget
2. Change the links and titles as your need and paste the below codes, Save and Drag the widget right below the header.

<style type="text/css">
.nav {
margin:auto;
overflow:hidden;
position:relative;
text-align:center;
width:500px
}
.nav a {
-moz-transition:.7s;
-ms-transition:.7s;
-o-transition:.7s;
-webkit-transition:.7s;
color:#393939;
display:block;
float:left;
font:25px Impact;
padding:1em 0 2em;
position:relative;
text-decoration:none;
transition:.7s;
width:25%
}
.nav a:hover {
color:#c6342e
}
.effect {
-moz-transition:.7s ease-in-out;
-ms-transition:.7s ease-in-out;
-o-transition:.7s ease-in-out;
-webkit-transition:.7s ease-in-out;
left:-12.5%;
position:absolute;
transition:.7s ease-in-out
}
.nav a:nth-child(1):hover ~ .effect {
left:12.5%
}
.nav a:nth-child(2):hover ~ .effect {
left:37.5%
}
.nav a:nth-child(3):hover ~ .effect {
left:62.5%
}
.nav a:nth-child(4):hover ~ .effect {
left:87.5%
}
.aslava-dot-nav:after {
background:#c6342e;
bottom:40px;
content:"";
display:block;
height:1px;
position:absolute;
width:100%
}
.aslava-dot-nav a:after {
background:#c6342e;
border-radius:100%;
bottom:38px;
content:"";
height:4px;
left:50%;
margin-left:-2px;
position:absolute;
width:4px
}
.aslava-dot-nav .effect {
background:#c6342e;
border-radius:100%;
bottom:36px;
height:10px;
margin-left:-5px;
width:10px
}
</style>

<div class="aslava-dot-nav nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Gallery</a>
<a href="#">Contact</a>
<div class="effect"></div>
</div>

Compressed Edition

Here is the compressed edition of this Lavalamp menu for more faster loading perform-

<style type="text/css">
.nav{margin:auto;overflow:hidden;position:relative;text-align:center;width:500px}.nav a{-moz-transition:.7s;-ms-transition:.7s;-o-transition:.7s;-webkit-transition:.7s;color:#393939;display:block;float:left;font:25px Impact;padding:1em 0 2em;position:relative;text-decoration:none;transition:.7s;width:25%}.nav a:hover{color:#c6342e}.effect{-moz-transition:.7s ease-in-out;-ms-transition:.7s ease-in-out;-o-transition:.7s ease-in-out;-webkit-transition:.7s ease-in-out;left:-12.5%;position:absolute;transition:.7s ease-in-out}.nav a:nth-child(1):hover ~ .effect{left:12.5%}.nav a:nth-child(2):hover ~ .effect{left:37.5%}.nav a:nth-child(3):hover ~ .effect{left:62.5%}.nav a:nth-child(4):hover ~ .effect{left:87.5%}.aslava-dot-nav:after{background:#c6342e;bottom:40px;content:"";display:block;height:1px;position:absolute;width:100%}.aslava-dot-nav a:after{background:#c6342e;border-radius:100%;bottom:38px;content:"";height:4px;left:50%;margin-left:-2px;position:absolute;width:4px}.aslava-dot-nav .effect{background:#c6342e;border-radius:100%;bottom:36px;height:10px;margin-left:-5px;width:10px}
</style>
<div class="aslava-dot-nav nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Gallery</a>
<a href="#">Contact</a>
<div class="effect"></div>
</div>

In this menu you can not add more than four links, but if you are advanced in CSS coding them you can modify this menu for adding as much link as you want.

Hope you enjoyed with our new CSS Lavalamp menu. Don't forget to offer thanks and leave a comment.  Smile :)