jQuery Drop Down Menu

In this JQuery tutorial we will develop a program to make Drop Down menu

Steps to develop the Drop Down menu .

Step 1:

Create a new file (suckerfish.html) and add the following code into it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>jQuery Drop Down Menu</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#van-one li").hover(
function(){ $("ul", this).fadeIn("slow"); },
function() { }
);
if (document.all) {
$("#van-one li").hoverClass ("sfHover");
}
});

$.fn.hoverClass = function(c) {
return this.each(function(){
$(this).hover(
function() { $(this).addClass(c); },
function() { $(this).removeClass(c); }
);
});
};
</script>

<style type="text/css">

/* vanigation */
.van, .van ul {
list-style: none;
margin: 0;
padding: 0;
}

.van {
font-family: Arial, Helvetica, sans-serif;
z-index: 100;
position: relative;
}
.van li {
border-left: 1px solid #000;
float: left;
margin: 0;
padding: 0;
position: relative;
}
.van li a, .van li a:link, .van li a:active, .van li a:visited {
font: bold 1.22em/25px Arial, Helvetica, sans-serif;
background: #EFEFEF;
color: #ff0000;
display: block;
padding: 0 9px;
text-transform: lowercase;
text-decoration: none;
}

.van li a:hover {
background: #ccc;
color: #000;

}
#van-one li:hover a,
#van-one li.sfHover a {
background: #ccc;
color: #000;
}
#van-one li:hover ul a,
#van-one li.sfHover ul a {
background: #F0ff0f;
color: #000000;
}
#van-one li:hover ul a:hover,
#van-one li.sfHover ul a:hover {
background: #ccc;
color: #000;
}

.van ul {
background: #565656;
border-bottom: 1px solid #000;
list-style: none;
margin: 0;
width: 100px;
position: absolute;
top: -999em;
left: -1px;
}
.van li:hover ul,
.van li.sfHover ul {
top: 25px;
}
.van ul li {
border: 0;
float: none;
}
.van ul a {
border: 1px solid #000;
border-bottom: 0;
padding-right: 20px;
width: 80px;
white-space: nowrap;
}
.van ul a:hover {
background: #ccc;
color: #000;
}
</style>
</head>
<body>

<ul id="van-one" class="van">
<li>

<a href="#item1">item A</a>
<ul>
<li><a href="#itemA1">item A1</a></li>
<li><a href="#itemA2">item A2</a></li>
<li><a href="#itemA3">item A3</a></li>
<li><a href="#itemA4">item A4</a></li>

</ul>
</li>
<li>
<a href="#item2">item B</a>
<ul>
<li><a href="#itemB1">item B1</a></li>
<li><a href="#itemB2">item B2</a></li>

</ul>
</li>
<li>
<a href="#item3">item C</a>
<ul>
<li><a href="#itemC1">item C1</a></li>
<li><a href="#itemC2">item C2</a></li>

</ul>
</li>

</ul>

<br clear="all" />

</body>
</html>

Program explanation:

The following code includes the jQuery JavaScript library file:

The Code

$("#van-one li").hover

This function works when generate an hover event and having correponding style css.

van li a:hover {
background: #ccc;
color: #000;

}
#van-one li:hover a,
#van-one li.sfHover a {
background: #ccc;
color: #000;
}
#van-one li:hover ul a,
#van-one li.sfHover ul a {
background: #F0ff0f;
color: #000000;
}
#van-one li:hover ul a:hover,
#van-one li.sfHover ul a:hover {
background: #ccc;
color: #000;
}

we using ul (unordered list) and impelement a style on it.

Check online demo of the application

Learn from experts! Attend jQuery Training classes.

Related Tags for suckerFish:

«Previous Index Next»