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);