|
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:
|
<script type="text/javascript" src="jquery.js"></script>
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
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
