第24款插件:rb_menu 活动弹出式菜单

描述：这个插件提供的效果为当鼠标放置在菜单名称上时整个菜单如同幻灯片一样弹出，鼠标离开后自动收回。

兼容浏览器：IE+/Firefox/Google Chrome

官方链接： http://www.getintothis.com/blog/2006/09/26

JS下载：http://ijquery.360sites.cn/js/rb_menu.js
备注：使用这个插件时要结合jquery-ui，这里有下载地址： http://ijquery.360sites.cn/js/jquery-ui-1.7.2.custom.min.js

预览： http://ijquery.360sites.cn/demo/rb_menu

打包下载：  http://ijquery.360sites.cn/demo/rb_menu/rb_menu.zip

参数说明：

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

复制代码

JS引用代码：

1. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery-1.3.2.min.js"></script>
   
2. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery-ui-1.7.2.custom.min.js"></script>
   
3. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/rb_menu.js"></script>
   
4. <script type="text/javascript">
   
5.         $(function () {
   
6.                 $('#menu').rb_menu();
   
7.         });
   
8. </script>

复制代码

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

1. <div id="menu" class="menu clearfix">
   
2.         <div class="toggle">menu »</div>
   
3.         <div class="items">
   
4.                 <ul>
   
5.                         <li><a href="#">jQuery</a></li>
   
6.                         <li><a href="#">Plugins</a></li>
   
7.                         <li><a href="#">UI</a></li>
   
8.                         <li><a href="#">About</a></li>
   
9.                         <li><a href="#">Donate</a></li>
   
10.                         <li><a href="#">Download</a></li>
    
11.                         <li><a href="#">Plugin Download</a></li>
    
12.                 </ul>
    
13.         </div>
    
14. </div>

复制代码

CSS代码：

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

复制代码

即：

1. 
   
2. 
   
3. .menu {
   
4.   font-family: arial, verdana, sans-serif;
   
5.   position: relative;
   
6. }
   
7. .menu, .menu .toggle {
   
8.   height: 25px;
   
9.   line-height: 25px;
   
10. }
    
11. .menu .toggle {
    
12.   color: #999;
    
13.   font-size: 11px;
    
14.   font-weight: bold;
    
15.   cursor: hand;
    
16.   cursor: pointer;
    
17.   position: absolute;
    
18.   left: 0;
    
19.   top: 0;
    
20.   width: 50px;
    
21. }
    
22. .menu .toggle-hover {
    
23.   color: red;
    
24. }
    
25. 
    
26. .menu .items {
    
27.   position: absolute;
    
28.   left: 50px;
    
29.   top: 0;
    
30. }
    
31. 
    
32. .menu .items ul,
    
33. .menu .items li {
    
34.   list-style-type: none;
    
35.   padding: 0;
    
36.   margin: 0;
    
37. }
    
38. .menu .items li {
    
39.   float: left;
    
40.   height: 25px;
    
41.   line-height: 25px;
    
42.   padding: 0 10px 0 0;
    
43. }
    
44. .menu .items a {
    
45.   font-size: 16px;
    
46.   font-weight: regular;
    
47.   color: #f90;
    
48.   text-decoration: none;
    
49. }
    
50. .menu .items a:hover {
    
51.   text-decoration: underline;
    
52. }
    
53. .menu .items a.current {
    
54.   color: #999;
    
55. }
    
56. 
    
57. .clearfix:after {
    
58.   content: "."; 
    
59.   display: block; 
    
60.   height: 0; 
    
61.   clear: both; 
    
62.   visibility: hidden;
    
63. }
    
64. 
    
65. .clearfix {display: inline-block;}
    
66. 
    
67. /* Hides from IE-mac \*/
    
68. * html .clearfix {height: 1%;}
    
69. .clearfix {display: block;}
    
70. /* End hide from IE-mac */
    

复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=24