The jQuery lavalamp navigation is really cool and simple to implement onto your website. Check out our hover buttons above to get a feel for how they look. Just follow the step by step guide below to create your own:
Stage 1: Creating the HTML
Open a blank html document and insert the following code:
<ul class=”lavaLamp”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Page 1</a></li>
<li><a href=”#”>Page 2</a></li>
<li><a href=”#”>Page 3</a></li>
</ul>
Stage 2: Inserting the CSS styling
Create a new CSS document and link it from the <head> section of your html sheet e.g. <link href=”stylesheet.css” rel=”stylesheet” type=”text/css” />
/* Styles for the entire LavaLamp menu */
.lavaLamp {
position: relative;
height: 29px; width: 421px;
background: url(”../image/bg.gif”) no-repeat top;
padding: 15px; margin: 10px 0;
overflow: hidden;
}
/* Force the list to flow horizontally */
.lavaLamp li {
float: left;
list-style: none;
}
/* Represents the background of the highlighted menu-item. */
.lavaLamp li.back {
background: url(”../image/lava.gif”) no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left {
background: url(”../image/lava.gif”) no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Styles for each menu-item. */
.lavaLamp li a {
position: relative; overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: #fff; outline: none;
text-align: center;
height: 30px; top: 7px;
z-index: 10; letter-spacing: 0;
float: left; display: block;
margin: auto 10px;
}
Stage Three: Attach the Javascript code
Insert the following code into the <head> section of your html document:
<script type=”text/javascript” src=”scripts/jquery.standard.js”></script>
<script type=”text/javascript” src=”scripts/jquery.easing.js”></script>
<script type=”text/javascript” src=”scripts/jquery.lavalamp.js”></script>
<script type=”text/javascript”>
$(function() { $(”.lavaLamp”).lavaLamp({ fx: “backout”, speed: 700 })});
</script>
Now all you need to do is download the three Javascript files and save them a folder named ‘Scripts’ in the root level of your website. Here are the files; jQuery Standard, jQuery Lavalamp, jQuery Easing. Enjoy!
SEO | Chris | 
March 5, 2010 10:03 am | 
Comments (0) 
Subscribe