Post
Ask Question

Vertical Scrolling Menu in ASP.NET using jQuery

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


Similar Articles