Introduction
This article will show you how to create a navigation tab menu with MouseHover effect using jQuery step by step. We will create a horizontal menu with small icons that will appear when hovering. Also, we will make the menu item expand. I thought about labeling the menu items and making them more noticeable, so the user can always see what the navigation entails. Being in a horizontal position makes everything readable and when the user hovers over the label, the rest of the item with the icon will slide out, such as links or a search box. jQuery is a great tool that helps our imagination turn ideas into reality. We can do almost everything we can think of with the help of this useful tool.
Step 1: First we have to create a Web Application.
- Go to Visual Studio 2010.
- New--> And select the Web Application.
- Give whatever name you want to.
- 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: Now add an image in the "Images" folder of the project.
![img1.jpg]()
Step 4: Than add the style.css files to your Styles folder.
![img2.jpg]()
Right-click on style.css files -> copy and paste it inside the <Head> section of your page. The reference looks like:
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
Step 5: In this step add the CSS code inside the <style> tag and place it into the <head> section of your page.
<style type="text/css">
body
{
background: #8B008B;
font-family: Arial;
height: 2000px;
}
.header
{
width: 600px;
height: 56px;
position: absolute;
top: 50%;
left: 10px;
background: #fff ;
}
a.back
{
width: 256px;
height: 73px;
position: absolute;
bottom: 15px;
right: 15px;
background: #fff;
}
a.dry
{
position: absolute;
bottom: 15px;
left: 15px;
text-align: left;
font-size: 12px;
color: #ccc;
text-transform: uppercase;
text-decoration: none;
}
</style>
Step 6: In this step we have to write the script reference to the aspx page; let us see from where you have to write the script code.
![img3.jpg]()
Right-click on selected files respectively -> copy and paste it inside <Head> section of your page; see step 7.
Step 7: Let us see the script code which you have to add inside the <script></script> tags and that will be placed either in the <head> section or the <body> section as you prefer.
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
Step 8: In this step we have to write the JavaScript code in the <body> tag of our page which is given below.
<script type="text/javascript">
$(function () {
var d = 300;
$('#navigation a').each(function () {
$(this).stop().animate({
'marginTop': '-80px'
}, d += 150);
});
$('#navigation > li').hover(
function () {
$('a', $(this)).stop().animate({
'marginTop': '-2px'
}, 200);
},
function () {
$('a', $(this)).stop().animate({
'marginTop': '-80px'
}, 200);
}
);
});
</script>
Step 9: In this step you will see the body code of the Default2.aspx page which is given below.
Code
<body>
<ul id="navigation">
<li class="home"><a href=""><span>Home</span></a></li>
<li class="search"><a href=""><span>Search</span></a></li>
<li class="photos"><a href=""><span>Photos</span></a></li>
<li class="help"><a href=""><span>Help</span></a></li>
<li class="contact"><a href=""><span>Contact</span></a></li>
</ul>
</body>
Step 10: In this step we will see the complete code of the Default2.aspx page which is given below.
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>Beautiful Fixed Slide Out Navigation </title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
var d = 300;
$('#navigation a').each(function () {
$(this).stop().animate({
'marginTop': '-80px'
}, d += 150);
});
$('#navigation > li').hover(
function () {
$('a', $(this)).stop().animate({
'marginTop': '-2px'
}, 200);
},
function () {
$('a', $(this)).stop().animate({
'marginTop': '-80px'
}, 200);
}
);
});
</script>
<style type="text/css">
body
{
background: #8B008B;
font-family: Arial;
height: 2000px;
}
.header
{
width: 600px;
height: 56px;
position: absolute;
top: 50%;
left: 10px;
background: #fff ;
}
a.back
{
width: 256px;
height: 73px;
position: absolute;
bottom: 15px;
right: 15px;
background: #fff;
}
a.dry
{
position: absolute;
bottom: 15px;
left: 15px;
text-align: left;
font-size: 12px;
color: #ccc;
text-transform: uppercase;
text-decoration: none;
}
</style>
</head>
<body>
<ul id="navigation">
<li class="home"><a href=""><span>Home</span></a></li>
<li class="search"><a href=""><span>Search</span></a></li>
<li class="photos"><a href=""><span>Photos</span></a></li>
<li class="help"><a href=""><span>Help</span></a></li>
<li class="contact"><a href=""><span>Contact</span></a></li>
</ul>
</body>
</html>
Step 11: In this step we will see the design of the Default2.aspx page which is given below.
![img4.jpg]()
Step 12: In this step we are going to run the Default2.aspx page by pressing F5.
![img5.jpg]()
Now to see the expanding effect, hover the mouse on the small icon.
![img6.jpg]()
![img7.jpg]()
![img8.jpg]()
![img9.jpg]()
![img10.jpg]()