Code<!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>
<title>Untitled Page</title>
<script type="text/javascript" src="Script/jquery-1.2.6.js"></script>
<script type="text/javascript" src="Script/jquery.jz.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<div id="menu">
<div id="menuitem1" style="width: 200px; float: left; margin: 20px;">
<a href="javascript:void(0);" style="line-height: 48px; height: 50px; width: 200px;
color: Black; text-decoration: none; text-align: center; display: block; vertical-align: middle;
background-image: url(App_Themes/LightBlue/Images/bg_top_menuitem.JPG);">Work</a>
<ul style="border: solid 1px #F2F2F2; width: 200px; margin: 0px; display: none;">
<li style="list-style-type: none;"><a href="http://www.baidu.com">Work Item 1</a></li>
<li style="list-style-type: none;">Work Item 2</li>
<li style="list-style-type: none;">Work Item 3</li>
</ul>
</div>
<div id="menuitem2" style="width: 200px; margin: 20px;">
<a href="javascript:void(0);" style="line-height: 48px; height: 50px; width: 200px;
color: Black; text-decoration: none; text-align: center; display: block; vertical-align: middle;
background-image: url(App_Themes/LightBlue/Images/bg_top_menuitem.JPG);">Work</a>
<ul style="border: solid 1px #F2F2F2; width: 200px; margin: 0px; display: none;">
<li style="list-style-type: none;">Work Item 1</li>
<li style="list-style-type: none;"><a href="http://www.google.com">Work Item 2</a></li>
<li style="list-style-type: none;">Work Item 3</li>
</ul>
</div>
</div>
<script type="text/javascript">
$("#menu").jzMenu();
</script>
</div>
</body>
</html>
//jQuery是这个世界上少数几个近于完美的东西。
Code//static methods
jQuery.extend({
jzMenuDefaultOption:
{
itemExpr:false,
itemHeaderExpr:"*:first-child",
itemPanelExpr:"*:last-child",
slideDownSpeed:600,
slideUpSpeed:300
}
});
//instance methods
jQuery.fn.extend({
jzMenu:
function(options)
{
options = jQuery.extend({},jQuery.jzMenuDefaultOption,options);
this.each(function(i){ //make single menu
var items = options.itemExpr ? jQuery(this).children(options.itemExpr) :jQuery(this).children();
var over = function(){
this.isOpen = true;
jQuery(this).children(options.itemPanelExpr).slideDown(options.sildeDownSpeed);
};
var out = function(){
jQuery(this).children(options.itemPanelExpr).slideUp(options.sildeupSpeed);
this.isOpen = false;
};
items.hover(over,out);
});
}
});
Demo:
