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