In this mini tutorial I’ll show you a small example on how to make a dropdown menu with jquery, works for all browsers, including IE 6 .
Code HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" media="screen" type="text/css" href="css/design.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/menu-effect.js"></script>
<title>Depot Webdesigner - Jquery Scroll Menu</title>
</head>
<body>
<div id="content">
<ul id="nav">
<li class="nosub"><a href="#url">Home</a><em></em></li>
<li><a href="#url" class="top-a">About Us</a><b></b>
<div>
<ul style="top: -112px;">
<li><a href="#url">Digital SLR Cameras</a></li>
<li><a href="#url">Interchangeable Lenses</a></li>
<li><a href="#url">Flash Guns and Accessories</a></li>
<li><a href="#url">Professional Tripods</a></li>
<li><a href="#url">Filters & Lens Hoods</a></li>
</ul>
</div>
</li>
<li><a href="#url">Services</a><b></b>
<div style="">
<ul style="top: -72px;">
<li><a href="#url">Printing & Framing</a></li>
<li><a href="#url">Photo Editing</a></li>
<li><a href="#url">Storage & Backup</a></li>
</ul>
</div>
</li>
<li><a href="#url">Contacts</a><b></b>
<div>
<ul style="top: -132px;">
<li><a href="#url">Support</a></li>
<li><a href="#url">Sales</a></li>
<li><a href="#url">Buying</a></li>
<li><a href="#url">Photographers</a></li>
<li><a href="#url">Stockist</a></li>
<li><a href="#url">General</a></li>
</ul>
</div>
</li>
<li><a href="#url">Stores Location</a><b></b>
<div>
<ul style="top: -72px;">
<li><a href="#url">South West Region</a></li>
<li><a href="#url">North East Region</a></li>
<li><a href="#url">Central Region</a></li>
</ul>
</div>
</li>
<li><a href="#url">Contact Us</a><b></b>
<div>
<ul style="top: -72px;">
<li><a href="#url">Email Addresses</a></li>
<li><a href="#url">By Post</a></li>
<li><a href="#url">Telephone Numbers</a></li>
</ul>
</div>
</li>
<li class="nosub"><a href="#url">Privacy Policy</a><em></em></li>
</ul>
<div id="pad"></div>
</div>
</body>
</html>
Code CSS :
#pad {
height:200px;
}
#nav {
padding:0;
margin:0;
list-style:none;
}
#nav {
position:relative;
z-index:100;
}
#nav div {
display:none;
position:absolute;
left:0;
top:40px;
height:auto;
float:left;
width:174px;
overflow:hidden;
}
#nav li {
float:left;
position:relative;
margin-right:1px;
}
#nav li a {
text-decoration:none;
font-family:arial, sans-serif;
font-size:13px;
white-space:nowrap;
display:block;
padding:0 10px;
cursor:pointer;
height:40px;
line-height:40px;
float:left;
font-weight:normal;
color:#fff;
background:url(../images/background.jpg) no-repeat top left;
}
#nav li b {
display:block;
float:left;
cursor:pointer;
width:30px;
height:40px;
font-weight:normal;
background:url(../images/background.jpg) no-repeat top right;
}
#nav li.nosub a {
padding:0 0 0 10px;
}
#nav li.nosub em {
display:block;
width:10px;
height:40px;
float:left;
background:url(../images/background.jpg) no-repeat top right;
}
#nav li ul {
padding:2px 2px 10px 2px;
margin:0;
list-style:none;
background:url(../images/background.jpg) no-repeat bottom left;
;
width:170px;
position:relative;
}
#nav li ul li {
float:none;
width:170px;
margin:0;
height:20px;
}
#nav li ul li a {
display:block;
height:20px;
line-height:20px;
padding:0 5px;
background-image:none;
color:#fff;
font-size:12px;
width:160px;
}
#nav li ul li a:hover {
background:#aa1d1d;
}