Look at the type of menu i used in this website,it is called Lava lamp.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....
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.
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
Now replace YOUR-LINK-HERE with your own links
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/AVvXsEgPMPY7j7lzRuORGBvJMaCCc6phiUt6-oxPOc72TAjM3gHryp7aD0NT5RK5NxYaAfhSZJI4gJKzatBkOoEBn0li_bKePDm1tyj05bXcarOgx_9yus9AsuaIcO1AgbzFIR34w9E8nqJBsEGt/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 {
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
