Introduction: In this article we will explore how we will create a vertical scrolling menu in ASP.NET using jQuery. The working of the application is that whenever we
place mouse on the menu item then it will animate and also will scrolling. At
every on mouseover and mouseout it will animate and also scrolling towards
vertical, and on hovering it will changes it's color and also change it's color
on mouse release by applying css. In this article we are using css to apply some
background, padding effects. Further in this article we are using some HTML
element such as div, and a user list inside we are taking some list item and
inside the list item we are taking a href link that will redirect the page on
that URL.
Step 1: Firstly we have to create a Web Application
- Go to Visual Studio 2010
- Create the web Application
- Click OK.
![Step_1fig.gif]()
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
![Step2-1fig.gif]()
![Step_2_2fig.gif]()
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_3fig.gif]()
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_4fig.gif]()
Step 5: In this step we will write code for the css inside the
Default2.aspx page which will be always inside between <style></style> let see
the code of css given below:
CSS Code:
<style
type="text/css">
body
{
padding:0;
margin:0
20px;
}
#div1
{
height:200px;
overflow:hidden;
position:relative;
background-color:#eee;
top: 5px;
left: -4px;
}
#Scrollmenu
{
width:100%;
list-style:none;
padding:0;
margin:0;
top:0;
position:relative;
height:100%;
width:300px;
}
#Scrollmenu
li
{
padding:10px
0;
text-align:right;
display:block;
cursor:hand;
cursor:pointer;
}
#Scrollmenu
li a
{
display: block;
margin-bottom: 5px;
width: 130px;
border: 2px
rgb(79, 79, 79) solid;
-webkit-border-radius:
4px;
-moz-border-radius: 4px;
color: #fff;
background: rgb(79, 79,
79);
}
#Scrollmenu
li span
{
font-family:georgia,
arial;
font-size:9px;
color:#464646;
}
</style>
Step 6: In this step we are going to
write the code of the jQuery which is given below:
Script Code:
<script
type="text/javascript">
$(document).ready(function () {
var c_over =
'#31b8da';
var c_out =
'#1f1f1f';
var p_Left =
'20px';
var p_Right =
'20px';
var d_p_Left = $('#Scrollmenu
li a').css('paddingLeft');
var d_p_Right = $('#Scrollmenu
li a').css('paddingRight');
$('#Scrollmenu li').click(function
() {
window.location = $(this).find('a').attr('href');
}).mouseover(function () {
$(this).find('a')
.animate({ paddingLeft: p_Left, paddingRight: p_Right }, { queue:
false, duration: 500 })
.animate({ backgroundColor: c_over }, { queue:
false, duration: 1000 });
}).mouseout(function () {
$(this).find('a')
.animate({ paddingLeft: d_p_Left, paddingRight: d_p_Right }, {
queue: false, duration: 500 })
.animate({ backgroundColor: c_out }, { queue:
false, duration: 1000 });
});
$('#div1').mousemove(function
(e) {
var s_top = parseInt($('#div1').offset().top);
var s_bottom = parseInt($('#div1').height()
+ s_top);
var mheight = parseInt($('#Scrollmenu
li').height() * $('#Scrollmenu li').length);
var top_value = Math.round(((s_top -
e.pageY) / 100) * mheight / 2);
$('#Scrollmenu').animate({ top:
top_value }, { queue: false, duration: 500 });
});
});
</script>
Code Description: Here we will explain
the code given above that how it works let we explain in brief firstly we are
taking some variable like as
c_over, c_out
it is for background color, mouseover and the variable
p_Left, p_Right for mouseout,
Padding, and the other last two named as d_p_Left, d_p_Right for mouseover
,Default Padding.
$('#Scrollmenu li').click(function
() { this function is used to Animate the LI on mouse over, mouse out and
window.location = $(this).find('a').attr('href');
is used to make list item clickable and $(this).find('a')
is used to mouse over list item and look for A element for transition ant the
other one is working same but for mouseout and discard to the mouse over
trtansition. $('#div1').mousemove(function
(e) { inside this function we will scroll the menu on mouse move above the #div1
laye.
Step 7: In this step we will write the
code for the design part of the default2.aspx page which will be inside the
<body></body> tag:
Body Code:
<body>
<h1
style="font-family:
'Comic Sans MS'; font-size:
xx-large; color:
#800000; background-color:
#FFCC99"> Scrolling Menu Vertically Using jQuery</h1>
<br/><br/><br/>
<div
id="div1" style="background-color:
#FFFF99">
<ul
id="Scrollmenu">
<li><a
href="#"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#FFFF00">Home</a></li>
<li><a
href="#"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#00FFFF">About Us</a></li>
<li><a
href="#"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#FF00FF">Contact Us</a></li>
<li><a
href="#"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#FFFF00">Services</a></li>
<li><a
href="#"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#00FFFF">Department</a></li>
<li><a
href="#"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#FFFF00">Projects</a></li>
<li><a
href="#"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#00FFFF">Articles</a></li>
<li><a
href="#"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#FF00FF">Videos</a></li>
</ul>
</div>
</body>
Step 8: In this step we will write
complete code for the source file of Default2.aspx page let see the code 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>
<title>Vertical
Scroll Menu</title>
<script
type="text/javascript"
src="Scripts/jquery-1.4.1.min.js"></script>
<script
type="text/javascript">
$(document).ready(function () {
var c_over =
'#31b8da';
var c_out =
'#1f1f1f';
var p_Left =
'20px';
var p_Right =
'20px';
var d_p_Left = $('#Scrollmenu
li a').css('paddingLeft');
var d_p_Right = $('#Scrollmenu
li a').css('paddingRight');
$('#Scrollmenu li').click(function
() {
window.location = $(this).find('a').attr('href');
}).mouseover(function () {
$(this).find('a')
.animate({ paddingLeft: p_Left, paddingRight: p_Right }, { queue:
false, duration: 500 })
.animate({ backgroundColor: c_over }, { queue:
false, duration: 1000 });
}).mouseout(function () {
$(this).find('a')
.animate({ paddingLeft: d_p_Left, paddingRight: d_p_Right }, {
queue: false, duration: 500 })
.animate({ backgroundColor: c_out }, { queue:
false, duration: 1000 });
});
$('#div1').mousemove(function
(e) {
var s_top = parseInt($('#div1').offset().top);
var s_bottom = parseInt($('#div1').height()
+ s_top);
var mheight = parseInt($('#Scrollmenu
li').height() * $('#Scrollmenu li').length);
var top_value = Math.round(((s_top -
e.pageY) / 100) * mheight / 2);
$('#Scrollmenu').animate({ top:
top_value }, { queue: false, duration: 500 });
});
});
</script>
<style
type="text/css">
body
{
padding:0;
margin:0
20px;
}
#div1
{
height:200px;
overflow:hidden;
position:relative;
background-color:#eee;
top: 5px;
left: -4px;
}
#Scrollmenu
{
width:100%;
list-style:none;
padding:0;
margin:0;
top:0;
position:relative;
height:100%;
width:300px;
}
#Scrollmenu
li
{
padding:10px
0;
text-align:right;
display:block;
cursor:hand;
cursor:pointer;
}
#Scrollmenu
li a
{
display: block;
margin-bottom: 5px;
width: 130px;
border: 2px
rgb(79, 79, 79) solid;
-webkit-border-radius:
4px;
-moz-border-radius: 4px;
color: #fff;
background: rgb(79, 79,
79);
}
#Scrollmenu
li span
{
font-family:georgia,
arial;
font-size:9px;
color:#464646;
}
</style>
</head>
<body>
<h1
style="font-family:
'Comic Sans MS'; font-size:
xx-large; color:
#800000; background-color:
#FFCC99"> Scrolling Menu Vertically Using jQuery</h1>
<br/><br/><br/>
<div
id="div1" style="background-color:
#FFFF99">
<ul
id="Scrollmenu">
<li><a
href="#"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#FFFF00">Home</a></li>
<li><a
href="#"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#00FFFF">About Us</a></li>
<li><a
href="#"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#FF00FF">Contact Us</a></li>
<li><a
href="#"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#FFFF00">Services</a></li>
<li><a
href="#"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#00FFFF">Department</a></li>
<li><a
href="#"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#FFFF00">Projects</a></li>
<li><a
href="#"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#00FFFF">Articles</a></li>
<li><a
href="#"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#FF00FF">Videos</a></li>
</ul>
</div>
</body>
</html>
Step 9: In this step we will see the design
page of the default2.aspx page let see the figure given below:
![Step_9fig.gif]()
Step 10: In this step we are going to run
the application by pressing F5 let see the output given below:
Output1:
![Output1.gif]()
Output2:
![output2.gif]()