This is an adaptation on some work done by Myles Angell. I've just simplified the CSS so that you can do more with it. The original is at http://be.twixt.us/jquery/suckerFish.php
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drop Down Menu</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-family:Sans-serif;
}
#container
{
margin:0 auto;
width:800px;
}
.nav, .nav ul, .nav ul
{
list-style: none;
}
.nav, .nav li
{
position: relative;
}
.nav
{
z-index: 100;
}
.nav ul
{
width:100px;
position: absolute;
top: -999em;
left: -1px;
}
.nav ul a
{
width: 80px;
}
.nav li
{
float: left;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited
{
height:20px;
display: block;
padding:10px;
text-decoration: none;
}
.nav li a:hover, #navigation li:hover a, #navigation li.sfHover a, #navigation li:hover ul a:hover, #navigation li.sfHover ul a:hover, .nav ul a:hover
{
background: #CCCCCC;
color: #000000;
}
#navigation li:hover ul a, #navigation li.sfHover ul a, .nav ul, .nav li a, .nav li a:link, .nav li a:active, .nav li a:visited
{
background: #000000;
color: #FFFFFF;
}
.nav li:hover ul, .nav li.sfHover ul
{
top:40px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$("#navigation li").hover(
function()
{
$("ul", this).fadeIn("fast");
},
function()
{
}
);
if (document.all)
{
$("#navigation li").hoverClass ("sfHover");
}
});
$.fn.hoverClass = function(c)
{
return this.each(function()
{
$(this).hover(
function()
{
$(this).addClass(c);
},
function()
{
$(this).removeClass(c);
}
);
});
};
</script>
</head>
<body>
<div id="container">
<ul id="navigation" class="nav">
<li><a href="#item1">item 1</a>
<ul>
<li><a href="#item1.1">item 1.1</a></li>
<li><a href="#item1.2">item 1.2</a></li>
<li><a href="#item1.3">item 1.3</a></li>
<li><a href="#item1.4">item 1.4</a></li>
</ul>
</li>
<li><a href="#item2">item 2</a>
<ul>
<li><a href="#item2.1">item 2.1</a></li>
<li><a href="#item2.2">item 2.2</a></li>
</ul>
</li>
<li><a href="#item3">item 3</a>
<ul>
<li><a href="#item3.1">item 3.1</a></li>
<li><a href="#item3.2">item 3.2</a></li>
</ul>
</li>
<li><a href="#item4">item 4</a>
<ul>
<li><a href="#item4.1">item 4.1</a></li>
<li><a href="#item4.2">item 4.2</a></li>
<li><a href="#item4.3">item 4.3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
No comments:
Post a Comment