第21款插件：rb_menu.js活动弹出式菜单

描述：这个插件提供的效果为当鼠标放置在菜单名称上时整个菜单如同幻灯片一样弹出，鼠标离开后自动收回。
兼容浏览器：IE+/Firefox/Google Chrome
官方链接： http://www.getintothis.com/blog/2006/09/26
JS下载：http://www.ijquery.cn/js/rb_menu.js
备注：使用这个插件时要结合jquery-ui，这里有下载地址： http://www.ijquery.cn/js/jquery-ui-1.7.2.custom.min.js
预览： http://www.ijquery.cn/study/demo/rb_menu
打包下载：  http://www.ijquery.cn/study/demo/rb_menu/rb_menu.zip
参数说明：

transition:    'easeOutBounce', //过渡-擦除效果，想要更多的可以用 jquery.easing.js效果，官网 http://gsgd.co.uk/sandbox/jquery/easing/
triggerEvent:  'mouseover', //触发动作：mouseover, mousedown, mouseup, click, dblclick
loadHideDelay : 1000, //页面加载时隐藏的时间，这里是1000毫秒，即1秒
blurHideDelay:  500,  //鼠标离开后隐藏的时间
effectDuration: 1000, //过渡时间
hideOnLoad: true,  //页面加载时是否隐藏菜单
autoHide: true 当鼠标离开时是否自动隐藏菜单

图片展示：

JS引用代码：

[js]

<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/rb_menu.js"></script>
<script type="text/javascript">
$(function () {
$('#menu').rb_menu();
});
</script>

[/js]

HTML代码：
说明：在此菜单的class名称必须是menu和clearfix，菜单总名称menu的class属性定义为toggle，子菜单定义为items。

[html]

<div id="menu">
<div>menu »</div>
<div>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">UI</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Plugin Download</a></li>
</ul>
</div>
</div>

[/html]

CSS代码：

[css]

<link rel="stylesheet" type="text/css" href="rb_menu.css" media="all" />

[/css]

即：

[css]

.menu {
font-family: arial, verdana, sans-serif;
position: relative;
}
.menu, .menu .toggle {
height: 25px;
line-height: 25px;
}
.menu .toggle {
color: #999;
font-size: 11px;
font-weight: bold;
cursor: hand;
cursor: pointer;
position: absolute;
left: 0;
top: 0;
width: 50px;
}
.menu .toggle-hover {
color: red;
}

.menu .items {
position: absolute;
left: 50px;
top: 0;
}

.menu .items ul,
.menu .items li {
list-style-type: none;
padding: 0;
margin: 0;
}
.menu .items li {
float: left;
height: 25px;
line-height: 25px;
padding: 0 10px 0 0;
}
.menu .items a {
font-size: 16px;
font-weight: regular;
color: #f90;
text-decoration: none;
}
.menu .items a:hover {
text-decoration: underline;
}
.menu .items a.current {
color: #999;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

[/css]