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.
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>
Hope you enjoyed with our new CSS Lavalamp menu. Don't forget to offer thanks and leave a comment. Smile :)
