Introduction: In this
article we are going to explore how we use jQuery in an ASP.NET menu control.
Further in this article we will see that how it is possible to create a flexible menu in ASP.NET
menu control by using jQuery in which we are taking some menu items and also we
will add their children items in the menu control. Both the parent item and the
children items will animate whenever we plac the mouse over an item. Here in this
article we are going to implement the animate as well as hover attributes to
build to get such type of effects using jQuery. The functionality of that
attributes is whenever we hover on the item of the menu control it will animate
or extend their size at the given width and will get back to their position, and
their sub items as well. Let's see how we will produce such type of
effects inside the ASP.NET control.
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 Project name
- Select add new item
- Add new web page and give it a name
- Click OK
![Step_2_1fig.gif]()
![Step_2_2fig.gif]()
Step 3: In this step we have to placed a
menu item to the page with adding some items and with their sub items let see
the code given below:
Code:
<asp:Menu
ID="m1"
runat="server"
Orientation="Horizontal"
RenderingMode="List">
<Items>
<asp:MenuItem
NavigateUrl="~/Default2.aspx"
ImageUrl="~/img/home5.gif"
Text="Home"
Value="Home"
/>
<asp:MenuItem
NavigateUrl="~/About.aspx"
ImageUrl="~/img/friend.gif"
Text="About Us"
Value="AboutUs"
/>
<asp:MenuItem
NavigateUrl="~/P.aspx"
ImageUrl="~/img/boximg.gif"
Text="Products"
Value="Products"
>
<asp:MenuItem
Text="iPhone"
Value="iPhone"></asp:MenuItem>
<asp:MenuItem
Text="Smartphones"
Value="Smartphones"></asp:MenuItem>
<asp:MenuItem
Text="iPod"
Value="iPod"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem
NavigateUrl="~/C.aspx"
ImageUrl="~/img/chatimg.gif"
Text="Contact Us"
Value="ContactUs"
/>
<asp:MenuItem
Text="Articles"
Value="Articles"
ImageUrl="~/img/article.gif">
<asp:MenuItem
Text="ASP.NET"
Value="ASP.NET"></asp:MenuItem>
<asp:MenuItem
Text="JAVA"
Value="JAVA"></asp:MenuItem>
<asp:MenuItem
Text="PHP"
Value="PHP"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
Step 4: Further the above code which is
the code for the ASP.NET menu control having items and sub items also have the
navigate url and the imageurl.
Let see what will the HTML code generated by the
browser for the this ASP.NET menu control which is given below:
Browser Code:
<ul
class="level1">
<li><a
class="level1"
href="Default2.aspx"><img
src="img/home5.gif"
alt=""
title=""
class="icon"
/>Home</a></li>
<li><a
class="level1"
href="About.aspx"><img
src="img/friend.gif"
alt=""
title=""
class="icon"
/>About Us</a></li>
<li><a
class="popout level1"
href="P.aspx"><img
src="img/boximg.gif"
alt=""
title=""
class="icon"
/>Products</a>
<ul
class="level2">
<li><a
class="level2"
href="#"
onclick="__doPostBack('Menu1','Products\\iPhone')">iPhone</a></li>
<li><a
class="level2"
href="#"
onclick="__doPostBack('Menu1','Products\\Smartphones')">Smartphones</a></li>
<li><a
class="level2"
href="#"
onclick="__doPostBack('Menu1','Products\\iPod')">iPod</a></li>
</ul>
</li>
<li><a
class="level1"
href="C.aspx"><img
src="img/chatimg.gif"
alt=""
title=""
class="icon"
/>Contact Us</a></li>
<li><a
class="popout level1"
href="#"
onclick="__doPostBack('Menu1','Articles')"><img
src="img/article.gif"
alt=""
title=""
class="icon"
/>Articles</a>
<ul
class="level2">
<li><a
class="level2"
href="#"
onclick="__doPostBack('Menu1','Articles\\ASP.NET')">ASP.NET</a></li>
<li><a
class="level2"
href="#"
onclick="__doPostBack('Menu1','Articles\\JAVA')">JAVA</a></li>
<li><a
class="level2"
href="#"
onclick="__doPostBack('Menu1','Articles\\PHP')">PHP</a></li>
</ul>
</li>
</ul>
Step 5: 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_6fig.gif]()
Step 6: 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_5fig.gif]()
Step 7: In this step we have to add some
images to application for which you have to make a folder named as img and add
the images in it. Let see from where you have to add the images.
![Step_7gif.gif]()
Step 8: In this step we will write the
style sheet code for the ASP.NET menu control which is given below:
StyleSheet Code:
![Step_8fig.gif]()
Step 9: In this step we have to write
the jQuery code for animating on hover at the item of menu control let see the
code given below:
jQuery Code:
![Step_9-fig.gif]()
Code Description: We have seen the HTML
code given above which have created the unordered list.
$("ul.level1
li").hover(function () {
If we want to access the list element only from our menu (not other list
element sin the page), we need to use the following jQuery selector: "ul.level1
li", which will find all li elements which have parent element ul
with class level1. Further the code
$(this).stop().animate({
opacity: 0.7, width: "160px" },
"slow");
I'm using hover, so that the animation will occur
once we go over the menu item. The two different functions are one for the over,
the other for the out effect.
Step 10: In this step we will write the
complete code for 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
id="Head1" runat="server">
<title>jQuery
in ASP.NET menu</title>
<style
type="text/css">
li
{
border:3px
solid yellow;
padding:25px
25px 25px
25px;
width:150px;
background-color:Maroon;
color:Black;
cursor:pointer;
}
a { color:Yellow;
font-family:Comic
Sans MS; }
a:hover{color:Aqua;}
a.level2
{
border:3px
solid gray;
padding:10px
10px 10px
10px;
width:100px;
background-color:Fuchsia;
color:Black;
cursor:pointer;
}
a.level2:hover
{color:Lime;}
</style>
<script
type="text/javascript"
src="Scripts/jquery-1.4.1.min.js"></script>
<script
type="text/javascript">
$(function () {
$("ul.level1 li").hover(function
() {
$(this).stop().animate({
opacity: 0.7, width: "200px" },
"slow");
}, function () {
$(this).stop().animate({
opacity: 1, width: "110px" },
"slow");
});
});
$(function () {
$("a.level2").hover(function
() {
$(this).stop().animate({
opacity: 0.7, width: "160px" },
"slow");
}, function () {
$(this).stop().animate({
opacity: 1, width: "100px" },
"slow");
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div
id="menu">
<asp:Menu
ID="m1"
runat="server"
Orientation="Horizontal"
RenderingMode="List">
<Items>
<asp:MenuItem
NavigateUrl="~/Default2.aspx"
ImageUrl="~/img/home5.gif"
Text="Home"
Value="Home"
/>
<asp:MenuItem
NavigateUrl="~/About.aspx"
ImageUrl="~/img/friend.gif"
Text="About Us"
Value="AboutUs"
/>
<asp:MenuItem
NavigateUrl="~/P.aspx"
ImageUrl="~/img/boximg.gif"
Text="Products"
Value="Products"
>
<asp:MenuItem
Text="iPhone"
Value="iPhone"></asp:MenuItem>
<asp:MenuItem
Text="Smartphones"
Value="Smartphones"></asp:MenuItem>
<asp:MenuItem
Text="iPod"
Value="iPod"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem
NavigateUrl="~/C.aspx"
ImageUrl="~/img/chatimg.gif"
Text="Contact Us"
Value="ContactUs"
/>
<asp:MenuItem
Text="Articles"
Value="Articles"
ImageUrl="~/img/article.gif">
<asp:MenuItem
Text="ASP.NET"
Value="ASP.NET"></asp:MenuItem>
<asp:MenuItem
Text="JAVA"
Value="JAVA"></asp:MenuItem>
<asp:MenuItem
Text="PHP"
Value="PHP"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>
Step 11: In this step we will
see the design page of the Default2.aspx page which is given below:
![Step_11fig.gif]()
Step 12: In this step you will have to
run the Default2.aspx page by pressing F5 and the output is given below:
Output1:
![Output1.gif]()
Output2:
![Output2.gif]()
Output3:
![Output3.gif]()