LavaLamp jQuery Plugin

Introduction: In this article we are going to discuss how to use the jQuery plugin and how we will create an awesome effect by using such type of jQuery plugin. Further in details we are going to explore a menu that we will create by using the jQuery LavaLamp plugin. In this article we are creating a menu by taking an unordered list with links that will navigate to another page. Further for providing some style we are using a style sheet that will produce an awesome effect to the menu. In this menu whenever we click on the item of the menu then a line will move along with the cursor toward the item on the menu. This type of effect will be made using the jQuery LavaLamp plugin so let see how it will possible to do that.

Step 1: Firstly we have to create a web Application.

Go to Visual Studio 2010
Create the web Application
Click OK.

Step 2: Secondly you have to add a new page to the website

Go to the Solution Explorer
Right Click on the Project name
Select add new item
Add new web page and give it a name
Click OK

Step 3: In this step we are going to see that see from where the js reference will be added to the source page of the default2.aspx page.

Step 4: Now we are going to write the script code which will be inside either on the head section or in the body section it will depend upon you which way you like most to placed it.

Step 5: In this step we are going to see that where you have to add the Style sheet file for it you have to add it inside the Styles folder let see below that how it will added:

Step 6: In this step we will write the CSS code for the menu which will have to apply to take the effects let see the code given below:

Style Sheet Code:

.l_LampB_Style
{
position: relative;
height: 50px;
width: 1000px;
background-color:orange;
padding: 15px;
margin: 10px 0;
overflow: hidden;
border: 5px groove yellow;
}
.l_LampB_Style li
{
float: left;
list-style: none;
bottom:10px;
}
.l_LampB_Style li.back
{
border-bottom: 5px groove teal;
width: 7px;
height: 30px;
z-index: 20;
position: absolute;
}
.l_LampB_Style li a
{
font-size:x-large;
font-family: Comic Sans MS;
border: 5px groove #ffff99;
text-decoration: none;
color:Maroon;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.l_LampB_Style li a:hover, .l_LampB_Style li a:active, .l_LampB_Style li a:visited
{
border: none;
}

Step 7: In this step we will see the jQuery code let see the jQuery code given below:

Step 8: In this step we will write the complete code for the Default2.aspx page let see the code given below:

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Demo</title>
<link rel="stylesheet" href="Styles/StyleSheet.css" type="text/css" media="screen"/>
<script type="text/javascript" src="Scripts/jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.easing.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function () {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function (event, menuItem) {
return false;
}
});
});
</script>
</head>
<body>
<h1 style="font-family: 'Comic Sans MS'; font-size: xx-large; color: #00FF00; background-color: #800000">Create a menu using lava lamp jQuery plugin</h1>
<ul class="l_LampB_Style" id="3">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>

Step 9: In this step we will see the design page of the Default2.aspx page which is given below:

Step 10: In this step we are going to run the Default2.aspx page by pressing F5 let see the output given below:

Output1:

Output2:

Output3:

Output4: