Weber's Showcase：弹簧菜单实现
核心 jQuery插件rb_menu的使用
简介 这应该是我见过的最有型的网站菜单设计。鼠标停留或点击时菜单从左向右弹出，鼠标离开时会自动收回。大家熟悉jQuery的应该知道，jQuery是有滑动显示效果，但那是从上到下，而使用animate函数设置的话会很麻烦（需要多设置一个外部容器并将其设置为overflow:hidden等）。使用jQuery实现的弹簧效果实在很酷。对于以简洁为主调的网站，推荐这款菜单插件
使用 需要文件：
- jquery-1.3.2.min.js（56K）（或者其他jquery版本也行）
- jquery.ui-1.7.min.js（20K）
- rb_menu.js（4K）
除了jquery的核心文件，其余两个文件加起来也不算大了。使用也很简单，最基本的调用：
$("#menu1").rb_menu();
效果见演示地址，第一个即是。
rb_menu函数接受的参数：
- hideOnLoad：是否在页面加载完时默认隐藏，默认值：true
- loadHideDelay：页面加载完隐藏的延迟，默认值：1000
- autoHide：是否自动隐藏（鼠标离开），默认值：true
- blurHideDelay：鼠标离开多久后隐藏，默认值：500
- effectDuration：效果持续时间，默认值：1000
- triggerEvent：触发条件，默认值：'mouseover'
- transition：弹出效果，默认值：'easeOutBounce'，可选：'swing'
我现在发现的参数就这些，欢迎大家补充。再给出一个例子：
$('#menu2').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false});
效果见演示地址，第二个。
原文 http://www.getintothis.com/blog/2006/09/26/my-first-jquery-plugin-a-sliding-menu/
心得
- 这是一款比较容易上手的插件
- 使用类名称‘toggle’和‘items’来绑定，不绑定具体标签，即是说使用‘toggle’类的不一定非要是div，也可以是h1、h2等，不一定‘items’类要用在ul的外层div上（看演示页面的源代码就知道），其实把这个div去掉，直接把类作用在ul上也是可以的
- 我发现在IE6、IE7还有个别浏览器上弹簧效果有问题，鼠标停留时是直接显示，离开时直接消失，没有弹簧效果，不清楚这是浏览器对什么参数或特性支持的不同才引来这样的差异，疑惑
后话 接下来的博文将介绍图片幻灯片实现原理，敬请期待
浙公网安备 33010602011771号