jquery-menu

1.加入script
<!--因为是jquery插件，所以它依赖于jquery-->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<!--menu插件自己的js-->
<script type="text/javascript" src="fg.menu.js"></script>

2.加入css
<!--menu的样式，不是必须。可以用来控制菜单样式-->
<link type="text/css" href="fg.menu.css" media="screen" rel="stylesheet" />
<!--该css文件位于theme，必须的，打开后可以看到该文件只有@import "ui.base.css";和
@import "ui.theme.css";
两句，加载同级目录（theme）的两个css文件-->
<link type="text/css" href="theme/ui.all.css" media="screen" rel="stylesheet" />

3.制作要作为菜单的元素
<!--
添加顶级按钮，可以是任何元素，menu会在该元素的点击事件触发。
ui-state-default如果你没修改该class-css的话，必须加入该css，否则会有错误。
-->
<div class="ui-state-default" id="flat">adsf</div>

<!--
要显示的下拉内容
-->
<div id="search-engines" class="hidden">
<ul>
<li><a href="#">Google</a></li>
<li><a href="#">Yahoo</a></li>
<li><a href="#">MSN</a></li>
<li><a href="#">Ask</a></li>
<li><a href="#">AOL</a></li>
</ul>
</div>

4.注册菜单
$(function(){
//这里是要注册的顶级菜单。
$('#flat').menu({
content: $('#-engines').html(), // grab content from this page菜单点击后会显示的内容，我们这里是将id是search-engines的div的html内容作为要显示的内容
showSpeed: 400
});
});

content要显示的内容
backLink: false，由于默认情况下，你点击了某一个下拉菜单，该落下菜单如果还有下拉菜单，则会进入下一级别的菜单，默认情况下在下面会显示back按钮，用来返回上级菜单，如果为false的时候，back按钮不存在，而是在上面显示该级别菜单的所有上级菜单。
flyOut: true,true的时候，则表示鼠标放上去就显示下拉菜单，而不是点击。
width:显示的下拉信息的宽度，默认是180.更多属性查看fg.menu.js文件的41行：
var options = jQuery.extend({
content: null,
width: 180, // width of menu container, must be set or passed in to calculate widths of child menus
maxHeight: 180, // max height of menu (if a drilldown: height does not include breadcrumb)
positionOpts: {
posX: 'left',
posY: 'bottom',
offsetX: 0,
offsetY: 0,
directionH: 'right',
directionV: 'down',
detectH: true, // do horizontal collision detection
detectV: true, // do vertical collision detection
linkToFront: false
},
showSpeed: 200, // show/hide speed in milliseconds
callerOnState: 'ui-state-active', // class to change the appearance of the link/button when the menu is showing
loadingState: 'ui-state-loading', // class added to the link/button while the menu is created
linkHover: 'ui-state-hover', // class for menu option hover state
linkHoverSecondary: 'li-hover', // alternate class, may be used for multi-level menus
// ----- multi-level menu defaults -----
crossSpeed: 200, // cross-fade speed for multi-level menus
crumbDefaultText: 'Choose an option:',
backLink: true, // in the ipod-style menu: instead of breadcrumbs, show only a 'back' link
backLinkText: 'Back',
flyOut: false, // multi-level menus are ipod-style by default; this parameter overrides to make a flyout instead
flyOutOnState: 'ui-state-default',
nextMenuLink: 'ui-icon-triangle-1-e', // class to style the link (specifically, a span within the link) used in the multi-level menu to show the next level
topLinkText: 'All',
nextCrumbLink: 'ui-icon-carat-1-e'
}, options);