Lava Lamp Menu For Your Blog

Look at the type of menu i used in http://midhunsuresh.blogspot.com/  ,it is called Lava lamp.You can see its image below.For the first time i saw this menu in my friend Reynold's website and i was really impressed with the menu.

Here i will explain you how to add Lava Lamp to your blogger blog....

Step-1 Add the CSS

Copy and paste all the below CSS code just above ]]></b:skin> which you can find in edit html section in template designer and you must delete d code in tabs section in edit html to avoid another menu appearing over the lava lamp menu.

navigation-body {

    font-family: Georgia;

    font-size: 14px;

    text-shadow: 0 1px 0 rgba(255,255,255,.50);

    color: #262626;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvAwNQyTJgnEzYFLPlhiG7boBbutZkmf1s6fXeVVpH1pEBI7-tINFHYVhgqSrs3vHWRX_6_R3WLpXtufCYXvIgjUnGC0MlNnlVXZHJpeY02lAdJyCYhglYpeUjwJmvGSupcjkYnNV_bLS-/s1600/wood-bg.jpg);

}

h1 img {

float: left;

margin-right: 5px;

}

h1 {

line-height: 56px;

}

h1, h2 {

font-weight: normal;

}

#wrapper {

    width: 900px;

    margin: 0 auto;

    position: relative;

}

.ads {

position: absolute;

top: 30px;

right: 0;

}

/*LAVALAMP START*/

.lavalamp {

    position: relative;

    border: 1px solid #d6d6d6;

    background: #fff;

    padding: 15px;

    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

    border-radius : 10px;

    -moz-border-radius : 10px;

    -webkit-border-radius : 10px;

    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));

    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));

    height: 18px;

}

.magenta {

background : rgb(190,64,120);

background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));

background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));

border: 1px solid #841144;

}

.cyan {

background : rgb(64,181,197);

background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));

background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));

border: 1px solid #2f8893;

}

.yellow {

background : rgb(255,199,79);

background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));

background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));

border: 1px solid #c08c1f;

}

.orange {

background : rgb(255,133,64);

background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));

background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));

border: 1px solid #c04f11;

}

.dark {

background : rgb(89,89,89);

background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));

background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));

border: 1px solid #272727;

}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{

color: #fff;

text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}

a {

    text-decoration: none;

    color: #262626;

    line-height: 20px;

}

ul {

    margin: 0;

    padding: 0;

    z-index: 300;

    position: absolute;

}

ul li {

    list-style: none;

    float:left;

    text-align: center;

    }

ul li a {

    padding: 0 20px;

    text-align: center;

    }

.floatr {

    position: absolute;

    top: 10px;

    z-index: 50;

    width: 70px;

    height: 30px;

    border-radius : 8px;

    -moz-border-radius : 8px;

    -webkit-border-radius : 8px;

    background : rgba(0,0,0,.20);

    -webkit-transition: all .4s ease-in-out;

    -moz-transition: all .4s ease-in-out;

}

Step-2: Add the JavaScript

Now add the below JavaScript just above </head> 

 

<script src='http://h1.ripway.com/paulsantosh/jquery-1.4.1.min.js'/>

<script src='http://h1.ripway.com/paulsantosh/lavalamp.js'/>

 

Step-3 : Add the HTML

Now go to your blogger dashboard and click Design > Add a Gadget >  HTML/JavaScript and paste the below HTML there. Editable parts are shown in red

<div class='lavalamp'>

<ul>

<li class='active'><a href='http://www.cuteprogrammer.com/'>Home</a></li>

<li><a href='YOUR-LINK-HERE'>About</a></li>

<li><a href='YOUR-LINK-HERE'>Blog</a></li>

<li><a href='YOUR-LINK-HERE'>Services</a></li>

<li><a href='YOUR-LINK-HERE'>Portfolio</a></li>

<li><a href='YOUR-LINK-HERE'>Contacts</a></li>

</ul>

<div class='floatr'/>

</div>
<span class="Apple-style-span" style="font-size: xx-small;"><a href="http://www.cuteprogrammer.com/">Widget by Midhun Suresh</a></span>

Now replace YOUR-LINK-HERE with your own links