Introduction: In this article we will explore the creation of a dropdown menu using jQuery in which we are using a stylesheet to give some effects. In this we will see how to style the entire dropdown in just css, and have the menu items change color when we mouse of them.

Step 1: Firstly we have to take a web Application

Web Application

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

Add New Item

Add Web PAge

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.

Jquery reference

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_new.gif

Step 5: Here we will code for the stylesheet which is very useful for the menu like its hover property that is used on mousehover. We are using css for getting the stylesheet properties on the particular action. The code given below it will be added inside the head section of the source page of default2.aspx page.

StyleSheet Code:

<style type="text/css">
 ul
{
list-style:none;
padding:0px;
margin:0px
}
 ul li
{
display:inline;
float:left;
}
 ul li a
{
color:#ffffff;
background:#990E00;
margin-right:5px;
font-weight:100;
font-size:20px;
font-family:Comic Sans MS;
text-decoration:none;
display:block;
width:210px;
height:25px;
line-height:25px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #560E00;
}
 ul li a:hover
{
color:#cccccc;
background:#ffff66;
font-weight:bold;
text-decoration:none;
display:block;
width:210px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #000000;
}
 ul li.s_links a
{
color:#000000;
background:#383838;
border-bottom:1px solid #cccccc;
font-weight:100;
text-decoration:none;
display:block;
width:210px;
text-align:center;
margin-top:2px;
 ul li.s_links a:hover
{
color:#000000;
background:#ccff66;
font-weight:100;
text-decoration:none;
display:block;
width:200px;
text-align:center;
}
ul li.s_links
{
display:none;
}
#container
 {
margin:0px auto;
width:800px;
}
.clear
 {
clear:both;
}
.left
{
float:left;
}
 .right
{
float:right;
}
</style>

Step 6: In this line we will write the jQuery code which will be added in the head section of the page which will be enclosed between the <script></script> tags given below.

jQuery Code:

Step_jquerycodeimage.gif

Code Description:

In this step we will see the handler of jQuery which is given below.

Step_6_1fig.gif

In this step we will run our code when the mouse enters (mouseenter method) an element with class set to dd, let see the given figure the menu link in our case:

Step_6_2fig.gif

Now we are going to make sure that we hide (hide()) all previously open dropdowns when mouse enters a menu link:

Step_6_3fig.gif

Take care the stop() function there, it helps us to show only one dropdown at a time when mouse is quickly hovered over various menu links. If we did not use it, each dropdown menu will remain visible unless we move our mouse arrow away explicitly.We then grab the actual dropdown menu to be shown with and store in into a variable:

Step_6-4fig.gif

After that, we are going to apply some css to the dropdown so that it appears exactly below the hovered menu link:

Step_6_5fig.gif

The code given above is very important as it makes sure that dropdown appears exactly below the hovered menu link. With position set to absolute, we can position the element at any place on the document independently. We then get the top position of the hovered menu link with (this refers to current hovered menu link) and add to it the height of it so that dropdown appears exactly below that link. We do something similar for the left property. We then use the z-index property to make sure that dropdown appears over everything else. code chmenu.stop().slideDown(300) will sliding it down at the speed of 500 miliseconds.

Now this far it was about to show the dropdown. It is time to hide it when the mouse leaves it. We do so with this piece of code:

Step_6_6fig.gif

Step 7: In this step we are going to combine all of the coding steps from step 4 to step 6, 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>Simple Dropdown Menu Using jQuery</title>
 <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
 <script type="text/javascript">
 $(function () {
$('.dd').mouseenter(function () {
$('.s_links').stop(false, true).hide();
var chmenu = $(this).parent().next();
chmenu.css({
position: 'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex: 1000
});
chmenu.stop().slideDown(500);
chmenu.mouseleave(function () {
$(this).slideUp(500);
});
});
});
</script>
<style type="text/css">
 ul
{
list-style:none;
padding:0px;
margin:0px
}
 ul li
{
display:inline;
float:left;
}
 ul li a
{
color:#ffffff;
background:#990E00;
margin-right:5px;
font-weight:100;
font-size:20px;
font-family:Comic Sans MS;
text-decoration:none;
display:block;
width:210px;
height:25px;
line-height:25px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #560E00;
}
 ul li a:hover
{
color:#cccccc;
background:#ffff66;
font-weight:bold;
text-decoration:none;
display:block;
width:210px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #000000;
}
 ul li.s_links a
{
color:#000000;
background:#383838;
border-bottom:1px solid #cccccc;
font-weight:100;
text-decoration:none;
display:block;
width:210px;
text-align:center;
margin-top:2px;
 ul li.s_links a:hover
{
color:#000000;
background:#ccff66;
font-weight:100;
text-decoration:none;
display:block;
width:200px;
text-align:center;
}
ul li.s_links
{
display:none;
}
#container
{
margin:0px auto;
width:800px;
}
.clear
{
clear:both;
}
.left
{
float:left;
}
 .right
{
float:right;
}
</style>
</head>
<body>
 <div id="container" style="margin-top:40px;">
 <ul>
 <li><a href="#" class="dd">Home</a></li>
 <li class="s_links">
 <a href="default5.aspx">Contact</a>
 <a href="default6.aspx">Queries</a>
 </li>
 </ul>
 <ul>
 <li><a href="#" class="dd">Services</a></li>
 <li class="s_links">
 <a href="default7.aspx">Web Applications</a>
 <a href="default8.aspx">Windows Applications</a>
 <a href="default9.aspx">Software Testing</a>
 <a href="$">Business Intelligence</a>
 <a href="$">Training</a>
 </li>
 </ul>
 <ul>
 <li><a href="#" class="dd">Professionals</a></li>
 <li class="s_links">
 <a href="default.aspx">Mobile Application</a>
 <a href="default4.aspx">.Net Courses</a>
 <a href="default2.aspx">Android Application</a>
 <a href="default3.aspx">Adobe Flex Courses</a>
 <a href="#">jQuery</a>
 </li>
 </ul>
</div>
 <br clear="all"/>
 </body>
</html>

Step 8: In this step we will see the design page named as default2.aspx which is given below.

Step_8_fig.gif

Step 9: At last we are going to run the application by pressing F5 and images related to the output is given below.

Output: This window will open like as we run the application

Step_9_1_fig.gif

The first one output shows that mouse is over on the home menu and we will also see that it has changed their property.

Step_9_2fig.gif

The second Output window shows the child element getting color changed with light green of the item on placing mouse over the second menu

Step_9_3fig.gif

The third output window shows the child menu item and getting color yellow.

Step_9_4fig.gif