一个非常简洁的弹性滑动菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是一个非常简洁的弹性滑动菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为一个非常简洁的弹性滑动菜单，属于站长常用代码" />
<title>一个非常简洁的弹性滑动菜单</title>
  <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/interface.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/rb_menu.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="css/rb_menu.css" media="screen,projection" />
</head>

<body>

default behavior:
<div id="menu1" class="menu">
    <div class="rb_toggle"><span>menu &#187;</span></div>
    <div class="rb_menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Facts</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Press</a></li>
            <li><a href="#">Jobs</a></li>
            <li><a href="#">Contacts</a></li>
            <li><a href="#">Log in</a></li>
        </ul>
    </div>
</div>

<hr />

triggered using <strong>click</strong>:
<div id="menu2" class="menu">
    <div class="rb_toggle"><span>menu &#187;</span></div>
    <div class="rb_menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Facts</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Press</a></li>
            <li><a href="#">Jobs</a></li>
            <li><a href="#">Contacts</a></li>
            <li><a href="#">Log in</a></li>
        </ul>
    </div>
</div>

<hr />

a different slide animtion ('easein'):
<div id="menu3" class="menu">
    <div class="rb_toggle"><span>menu &#187;</span></div>
    <div class="rb_menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Facts</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Press</a></li>
            <li><a href="#">Jobs</a></li>
            <li><a href="#">Contacts</a></li>
            <li><a href="#">Log in</a></li>
        </ul>
    </div>
</div>

<p>
  <script>
$('#menu1').rb_menu();
$('#menu2').rb_menu({triggerEvent: 'click', hideOnLoad: false, autoHide: false});
$('#menu3').rb_menu({transition: 'easein'});
</script>
</p>
</body>
</html>

JS代码(interface.js):

/* * Interface elements for jQuery - http://interface.eyecon.ro * * Copyright (c) 2006 Stefan Petre * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. */
 eval(function(p,a,c,k,e,d){
	e=function(c){
	return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
	if(!''.replace(/^/,String)){
	while(c--){
	d[e(c)]=k[c]||e(c)}
k=[(function(e){
	return d[e]}
)];
	e=(function(){
	return'\\w+'}
);
	c=1}
;
	while(c--){
	if(k[c]){
	p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}
}
return p}
('9.2p={
	4s:f(e,s){
	u l=0;
	u t=0;
	u 1B=0;
	u 1G=0;
	u w=9.B(e,\'28\');
	u h=9.B(e,\'24\');
	u U=e.2o;
	u X=e.2y;
	2t(e.2s){
	l+=e.2u+(e.R?J(e.R.1K)||0:0);
	t+=e.2r+(e.R?J(e.R.2c)||0:0);
	6(s){
	1B+=e.1w.1n||0;
	1G+=e.1w.1j||0}
e=e.2s}
l+=e.2u+(e.R?J(e.R.1K)||0:0);
	t+=e.2r+(e.R?J(e.R.2c)||0:0);
	1G=t-1G;
	1B=l-1B;
	d{
	x:l,y:t,4k:1B,4l:1G,w:w,h:h,U:U,X:X}
}
,4m:f(e){
	u x=0;
	u y=0;
	u 1o=1p;
	u 2n=9.1v.2a?\'4n\':\'4o\';
	A=e.1x;
	6(9(e).B(\'W\')==\'1a\'){
	1s=A.1h;
	1X=A.N;
	A.1h=\'1N\';
	A.W=\'1W\';
	A.N=\'1I\';
	1o=1k}
8=e;
	2t(8&&8.37!=2n){
	x+=8.2u+(8.R&&!9.1v.36?J(8.R.1K)||0:0);
	y+=8.2r+(8.R&&!9.1v.36?J(8.R.2c)||0:0);
	8=8.2s}
8=e;
	2t(8&&8.37!=2n){
	x-=8.1n||0;
	y-=8.1j||0;
	8=8.1w}
6(1o){
	A.W=\'1a\';
	A.N=1X;
	A.1h=1s}
d{
	x:x,y:y}
}
,2V:f(e){
	u w=9.B(e,\'28\');
	u h=9.B(e,\'24\');
	u U=0;
	u X=0;
	A=e.1x;
	6(9(e).B(\'W\')!=\'1a\'){
	U=e.2o;
	X=e.2y}
C{
	1s=A.1h;
	1X=A.N;
	A.1h=\'1N\';
	A.W=\'1W\';
	A.N=\'1I\';
	U=e.2o;
	X=e.2y;
	A.W=\'1a\';
	A.N=1X;
	A.1h=1s}
d{
	w:w,h:h,U:U,X:X}
}
,4u:f(e){
	6(e){
	w=e.1E;
	h=e.1F}
C{
	1z=K.17;
	w=2w.2A||1M.2A||(1z&&1z.1E)||K.Z.1E;
	h=2w.2B||1M.2B||(1z&&1z.1F)||K.Z.1F}
d{
	w:w,h:h}
}
,4x:f(e){
	6(e){
	t=e.1j;
	l=e.1n;
	w=e.2i;
	h=e.2z;
	26=0;
	2b=0}
C{
	6(K.17&&K.17.1j){
	t=K.17.1j;
	l=K.17.1n;
	w=K.17.2i;
	h=K.17.2z}
C 6(K.Z){
	t=K.Z.1j;
	l=K.Z.1n;
	w=K.Z.2i;
	h=K.Z.2z}
26=1M.2A||K.17.1E||K.Z.1E||0;
	2b=1M.2B||K.17.1F||K.Z.1F||0}
d{
	t:t,l:l,w:w,h:h,26:26,2b:2b}
}
,2W:f(e,1u){
	8=$(e);
	t=8.B(\'23\')||\'\';
	r=8.B(\'22\')||\'\';
	b=8.B(\'1U\')||\'\';
	l=8.B(\'1Z\')||\'\';
	6(1u)d{
	t:J(t)||0,r:J(r)||0,b:J(b)||0,l:J(l)}
;
	C d{
	t:t,r:r,b:b,l:l}
}
,4C:f(e,1u){
	8=$(e);
	t=8.B(\'4D\')||\'\';
	r=8.B(\'4E\')||\'\';
	b=8.B(\'4F\')||\'\';
	l=8.B(\'4G\')||\'\';
	6(1u)d{
	t:J(t)||0,r:J(r)||0,b:J(b)||0,l:J(l)}
;
	C d{
	t:t,r:r,b:b,l:l}
}
,4I:f(e,1u){
	8=$(e);
	t=8.B(\'2c\')||\'\';
	r=8.B(\'4J\')||\'\';
	b=8.B(\'4K\')||\'\';
	l=8.B(\'1K\')||\'\';
	6(1u)d{
	t:J(t)||0,r:J(r)||0,b:J(b)||0,l:J(l)||0}
;
	C d{
	t:t,r:r,b:b,l:l}
}
,4v:f(1J){
	x=1J.3f||(1J.3h+(K.17.1n||K.Z.1n))||0;
	y=1J.3i||(1J.4p+(K.17.1j||K.Z.1j))||0;
	d{
	x:x,y:y}
}
}
;
	9.j=f(2f,1q,11,g){
	u z=F;
	z.g=/2L|2M|2O|2Q|2P|2R|2T|2G|2X/.1T(g)?g:\'2l\';
	z.o={
	v:1q.v||3n,1b:1q.1b,1y:1q.1y}
;
	z.8=2f;
	u y=z.8.1x;
	z.a=f(){
	6(1q.1y)1q.1y.2D(2f,[z.19]);
	6(11=="1l"){
	6(z.19==1)z.19=0.3o;
	6(2w.3q)y.3b="3c(1l="+z.19*3e+")";
	C y.1l=z.19}
C 6(J(z.19))y[11]=J(z.19)+"1f";
	y.W="1W"}
;
	z.2H=f(){
	d 33(9.B(z.8,11))}
;
	z.2g=f(){
	u r=33(9.3r(z.8,11));
	d r&&r>-30?r:z.2H()}
;
	z.18=f(2E,2I){
	z.2j=(M 2J()).31();
	z.19=2E;
	z.a();
	z.2q=3t(f(){
	z.1y(2E,2I)}
,13)}
;
	z.2m=f(p){
	6(!z.8.1d)z.8.1d={
}
;
	z.8.1d[11]=F.2g();
	z.18(0,z.8.1d[11]);
	6(11!="1l")y[11]="3v"}
;
	z.1r=f(){
	6(!z.8.1d)z.8.1d={
}
;
	z.8.1d[11]=F.2g();
	z.o.1r=1k;
	z.18(z.8.1d[11],0)}
;
	6(9.1v.2a&&!z.8.R.3w)y.3x="1";
	6(!z.8.3y)z.8.2S=9.B(z.8,"2e");
	y.2e="1N";
	z.1y=f(G,2k){
	u t=(M 2J()).31();
	6(t>z.o.v+z.2j){
	3z(z.2q);
	z.2q=3B;
	z.19=2k;
	z.a();
	6(z.8.1D)z.8.1D[11]=1k;
	u 1P=1k;
	2N(u i Y z.8.1D){
	6(z.8.1D[i]!==1k)1P=1p}
6(1P){
	y.2e=z.8.2S;
	6(z.o.1r)y.W=\'1a\';
	6(z.o.1r){
	2N(u p Y z.8.1D){
	y[p]=z.8.1d[p]+(p=="1l"?"":"1f");
	6(p==\'24\'||p==\'28\')9.3C(z.8,p)}
}
}
6(1P&&z.o.1b&&z.o.1b.35==38)z.o.1b.2D(z.8)}
C{
	u n=t-F.2j;
	u p=n/z.o.v;
	z.19=9.j.2K(p,n,G,(2k-G),z.o.v,z.g);
	z.a()}
}
}
;
	9.2h=f(e){
	6(/3D|3E|3F|3G|3H|3I|3J|3K|3L|Z|3M|3N|3O|3P|3Q|3R|3S/i.1T(e.2v))d 1p;
	C d 1k}
;
	9.j.2Z=f(e,1i){
	c=e.3T;
	1g=c.1x;
	1g.N=1i.N;
	1g.23=1i.1e.t;
	1g.1Z=1i.1e.l;
	1g.1U=1i.1e.b;
	1g.22=1i.1e.r;
	1g.15=1i.15+\'1f\';
	1g.O=1i.O+\'1f\';
	e.1w.2F(c,e);
	e.1w.3U(e)}
;
	9.j.2U=f(e){
	6(!9.2h(e))d 1p;
	u t=9(e);
	u A=e.1x;
	u 1o=1p;
	E={
}
;
	E.N=t.B(\'N\');
	E.16=9.2p.2V(e);
	E.1e=9.2p.2W(e);
	2C=e.R?e.R.3a:t.B(\'3V\');
	6(t.B(\'W\')==\'1a\'){
	1s=t.B(\'1h\');
	t.2m();
	1o=1k}
E.15=J(t.B(\'15\'))||0;
	E.O=J(t.B(\'O\'))||0;
	6(1o){
	t.1r();
	A.1h=1s}
u 34=\'3X\'+J(Q.3Y()*30);
	u 1m=K.3Z(/40|2Y|41|42|43|44|46|47|48|49|4a|4b|4c|4d/i.1T(e.2v)?\'4e\':e.2v);
	9.4f(1m,\'4g\',34);
	4h=9(1m).4i(\'4j\');
	u T=1m.1x;
	u 15=0;
	u O=0;
	6(E.N==\'2x\'||E.N==\'1I\'){
	15=E.15;
	O=E.O}
T.15=15+\'1f\';
	T.O=O+\'1f\';
	T.N=E.N!=\'2x\'&&E.N!=\'1I\'?\'2x\':E.N;
	T.24=E.16.X+\'1f\';
	T.28=E.16.U+\'1f\';
	T.23=E.1e.t;
	T.22=E.1e.r;
	T.1U=E.1e.b;
	T.1Z=E.1e.l;
	T.2e=\'1N\';
	6(9.1v.2a){
	T.3a=2C}
C{
	T.4z=2C}
6(9.1v=="2a"){
	A.3b="3c(1l="+0.39*3e+")"}
A.1l=0.39;
	e.1w.2F(1m,e);
	1m.3k(e);
	A.23=\'1t\';
	A.22=\'1t\';
	A.1U=\'1t\';
	A.1Z=\'1t\';
	A.N=\'1I\';
	A.3u=\'1a\';
	A.15=\'1t\';
	A.O=\'1t\';
	d{
	E:E,32:9(1m)}
}
;
	9.j.2K=f(p,n,G,q,v,L){
	6(L==\'2l\'){
	d((-Q.3A(p*Q.1C)/2)+0.5)*q+G}
6(L==\'2L\'){
	d q*(n/=v)*n*n+G}
6(L==\'2M\'){
	d-q*((n=n/v-1)*n*n*n-1)+G}
6(L==\'2O\'){
	6((n/=v/2)<1)d q/2*n*n*n*n+G;
	d-q/2*((n-=2)*n*n*n-2)+G}
6(L==\'2P\'){
	6((n/=v)<(1/2.H)){
	d q*(7.P*n*n)+G}
C 6(n<(2/2.H)){
	d q*(7.P*(n-=(1.5/2.H))*n+.H)+G}
C 6(n<(2.5/2.H)){
	d q*(7.P*(n-=(2.25/2.H))*n+.1O)+G}
C{
	d q*(7.P*(n-=(2.1Q/2.H))*n+.1R)+G}
}
6(L==\'2Q\'){
	I=v-n;
	6((I/=v)<(1/2.H)){
	m=q*(7.P*I*I)}
C 6(I<(2/2.H)){
	m=q*(7.P*(I-=(1.5/2.H))*I+.H)}
C 6(I<(2.5/2.H)){
	m=q*(7.P*(I-=(2.25/2.H))*I+.1O)}
C{
	m=q*(7.P*(I-=(2.1Q/2.H))*I+.1R)}
d q-m+G}
6(L==\'2R\'){
	6(n<v/2){
	I=n*2;
	6((I/=v)<(1/2.H)){
	m=q*(7.P*I*I)}
C 6(I<(2/2.H)){
	m=q*(7.P*(I-=(1.5/2.H))*I+.H)}
C 6(I<(2.5/2.H)){
	m=q*(7.P*(I-=(2.25/2.H))*I+.1O)}
C{
	m=q*(7.P*(I-=(2.1Q/2.H))*I+.1R)}
d(q-m+G)*.5+G}
C{
	n=n*2-v;
	6((n/=v)<(1/2.H)){
	m=q*(7.P*n*n)+G}
C 6(n<(2/2.H)){
	m=q*(7.P*(n-=(1.5/2.H))*n+.H)+G}
C 6(n<(2.5/2.H)){
	m=q*(7.P*(n-=(2.25/2.H))*n+.1O)+G}
C{
	m=q*(7.P*(n-=(2.1Q/2.H))*n+.1R)+G}
d m*.5+q*.5+G}
}
6(L==\'2G\'){
	6((n/=v)==1)d G+q;
	d q*Q.27(2,-10*n)*Q.21((n*v-(v*.3)/4)*(2*Q.1C)/(v*.3))+q+G}
6(L==\'2T\'){
	6(n==0)d b;
	6((n/=v)==1)d G+q;
	d-(q*Q.27(2,10*(n-=1))*Q.21((n*v-(v*.3)/4)*(2*Q.1C)/(v*.3)))+G}
6(L==\'2X\'){
	6(n==0)d G;
	6((n/=v)==1)d G+q;
	$(\'#1T\').3W(p+\'<2Y />\'+n);
	6(p<1)d-.5*(q*Q.27(2,10*(n-=1))*Q.21((n*v-(v*.45)/4)*(2*Q.1C)/(v*.45)))+G;
	d q*Q.27(2,-10*(n-=1))*Q.21((n*v-(v*.45)/4)*(2*Q.1C)/(v*.45))*.5+q+G}
}
;
	9.4q.4r({
	4t:f(k,D,g){
	d F.12(\'S\',f(){
	M 9.j.V(F,k,D,\'1V\',\'Y\',g)}
)}
,4w:f(k,D,g){
	d F.12(\'S\',f(){
	M 9.j.V(F,k,D,\'1V\',\'1A\',g)}
)}
,4y:f(k,D,g){
	d F.12(\'S\',f(){
	M 9.j.V(F,k,D,\'1V\',\'1H\',g)}
)}
,4A:f(k,D,g){
	d F.12(\'S\',f(){
	M 9.j.V(F,k,D,\'29\',\'Y\',g)}
)}
,4B:f(k,D,g){
	d F.12(\'S\',f(){
	M 9.j.V(F,k,D,\'29\',\'1A\',g)}
)}
,4H:f(k,D,g){
	d F.12(\'S\',f(){
	M 9.j.V(F,k,D,\'29\',\'1H\',g)}
)}
,4L:f(k,D,g){
	d F.12(\'S\',f(){
	M 9.j.V(F,k,D,\'O\',\'Y\',g)}
)}
,3g:f(k,D,g){
	d F.12(\'S\',f(){
	M 9.j.V(F,k,D,\'O\',\'1A\',g)}
)}
,3j:f(k,D,g){
	d F.12(\'S\',f(){
	M 9.j.V(F,k,D,\'O\',\'1H\',g)}
)}
,3l:f(k,D,g){
	d F.12(\'S\',f(){
	M 9.j.V(F,k,D,\'1L\',\'Y\',g)}
)}
,3p:f(k,D,g){
	d F.12(\'S\',f(){
	M 9.j.V(F,k,D,\'1L\',\'1A\',g)}
)}
,3s:f(k,D,g){
	d F.12(\'S\',f(){
	M 9.j.V(F,k,D,\'1L\',\'1H\',g)}
)}
}
);
	9.j.V=f(e,k,D,20,L,g){
	6(!9.2h(e)){
	9.3d(e,\'S\');
	d 1p}
u z=F;
	z.8=9(e);
	z.g=g||\'2l\';
	6(L==\'1H\'){
	L=z.8.B(\'W\')==\'1a\'?\'Y\':\'1A\'}
6(!e.1Y)e.1Y=z.8.B(\'W\');
	z.8.2m();
	z.k=k;
	z.D=D;
	z.j=9.j.2U(e);
	z.L=L;
	z.20=20;
	z.1b=f(){
	z.8.1r();
	9.j.2Z(z.j.32.1c(0),z.j.E);
	6(z.L==\'Y\'){
	z.8.B(\'W\',z.8.1c(0).1Y==\'1a\'?\'1W\':z.8.1c(0).1Y)}
C{
	z.8.B(\'W\',\'1a\')}
6(z.D&&z.D.35==38){
	z.D.2D(z.8.1c(0))}
9.3d(z.8.1c(0),\'S\')}
;
	3m(z.20){
	1S\'1V\':z.14=M 9.j(z.8.1c(0),9.k(z.k,z.1b),\'15\',z.g);
	6(z.L==\'Y\'){
	z.14.18(-z.j.E.16.X,0)}
C{
	z.14.18(0,-z.j.E.16.X)}
2d;
	1S\'29\':z.14=M 9.j(z.8.1c(0),9.k(z.k,z.1b),\'15\',z.g);
	6(z.L==\'Y\'){
	z.14.18(z.j.E.16.X,0)}
C{
	z.14.18(0,z.j.E.16.X)}
2d;
	1S\'O\':z.14=M 9.j(z.8.1c(0),9.k(z.k,z.1b),\'O\',z.g);
	6(z.L==\'Y\'){
	z.14.18(-z.j.E.16.U,0)}
C{
	z.14.18(0,-z.j.E.16.U)}
2d;
	1S\'1L\':z.14=M 9.j(z.8.1c(0),9.k(z.k,z.1b),\'O\',z.g);
	6(z.L==\'Y\'){
	z.14.18(z.j.E.16.U,0)}
C{
	z.14.18(0,z.j.E.16.U)}
2d}
}
;
	',62,296,'||||||if||el|jQuery||||return||function|transition|||fx|speed||||||delta||||var|duration|||||es|css|else|callback|oldStyle|this|firstNum|75|nm|parseInt|document|type|new|position|left|5625|Math|currentStyle|interfaceFX|wrs|wb|slide|display|hb|in|body||prop|queue||ef|top|sizes|documentElement|custom|now|none|complete|get|orig|margins|px|cs|visibility|old|scrollTop|true|opacity|wr|scrollLeft|restoreStyle|false|options|hide|oldVisibility|0px|toInteger|browser|parentNode|style|step|de|out|sl|PI|curAnim|clientWidth|clientHeight|st|toggle|absolute|event|borderLeftWidth|right|self|hidden|9375|done|625|984375|case|test|marginBottom|up|block|oldPosition|ifxFirstDisplay|marginLeft|direction|sin|marginRight|marginTop|height||iw|pow|width|down|msie|ih|borderTopWidth|break|overflow|elem|cur|fxCheckTag|scrollWidth|startTime|lastNum|original|show|lastElement|offsetWidth|iUtil|timer|offsetTop|offsetParent|while|offsetLeft|nodeName|window|relative|offsetHeight|scrollHeight|innerWidth|innerHeight|oldFloat|apply|from|insertBefore|elasticout|max|to|Date|transitions|easein|easeout|for|easeboth|bounceout|bouncein|bounceboth|oldOverflow|elasticin|buildWrapper|getSize|getMargins|elasticboth|br|destroyWrapper|10000|getTime|wrapper|parseFloat|wid|constructor|opera|tagName|Function|999|styleFloat|filter|alpha|dequeue|100|pageX|SlideOutLeft|clientX|pageY|SlideToggleLeft|appendChild|SlideInRight|switch|400|9999|SlideOutRight|ActiveXObject|curCSS|SlideToggleRight|setInterval|listStyle|1px|hasLayout|zoom|oldOverlay|clearInterval|cos|null|setAuto|tr|td|tbody|caption|thead|tfoot|col|colgroup|th|header|script|frame|frameset|option|optgroup|meta|firstChild|removeChild|float|html|w_|random|createElement|img|input|hr|select|textarea||object|iframe|button|form|table|ul|dl|ol|div|attr|id|wrapEl|addClass|fxWrapper|sx|sy|getPosition|HTML|BODY|clientY|fn|extend|getPos|SlideInUp|getClient|getPointer|SlideOutUp|getScroll|SlideToggleUp|cssFloat|SlideInDown|SlideOutDown|getPadding|paddingTop|paddingRight|paddingBottom|paddingLeft|SlideToggleDown|getBorder|borderRightWidth|borderBottomWidth|SlideInLeft'.split('|'),0,{
}
))

JS代码(rb_menu.js):

/* * simple sliding menu using jQuery and Interface - http://www.getintothis.com * * note:this library depends on jquery (http://www.jquery.com) and * interface (http://interface.eyecon.ro) * * Copyright (c) 2006 Ramin Bozorgzadeh * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LECENSE.txt) linceses. */
$.fn.rb_menu = function(options){
	var self = this;
	self.options ={
	// transitions:easein,easeout,easeboth,bouncein,bounceout,// bounceboth,elasticin,elasticout,elasticboth transition:'bounceout',// trigger events:mouseover,mousedown,mouseup,click,dblclick triggerEvent:'mouseover',// number of ms to delay before hiding menu (on page load) loadHideDelay:1000,// number of ms to delay before hiding menu (on mouseout) blurHideDelay:500,// number of ms for transition effect effectDuration:1000,// hide the menu when the page loads hideOnLoad:true,// automatically hide menu when mouse leaves area autoHide:true}
// make sure to check if options are given! if(options){
	$.extend(self.options,options);
}
return this.each(function(){
	var menu = $(this).find('.rb_menu');
	var toggle = $(this).find('.rb_toggle span');
	if(self.options.hideOnLoad){
	// let's hide the menu when the page is loading // after{
	loadHideDelay}
milliseconds setTimeout( function(){
	menu.hide();
	// add 'hover' class to trigger for css styling toggle.hover( function(){
	$(this).addClass('hover');
}
,function(){
	$(this).removeClass('hover');
}
);
}
,self.options.loadHideDelay);
}
// bind event defined by{
	triggerEvent}
to the trigger // to open and close the menu toggle.bind(self.options.triggerEvent,function(){
	// if the trigger event is click or dblclick,we want // to close the menu if its open if((self.options.triggerEvent == 'click' || self.options.triggerEvent == 'dblclick') && !self.closed){
	menu.hide();
}
else{
	menu.show();
}
}
);
	menu.hide = function(){
	if(this.css('display') == 'block' && !self.closed){
	this.SlideOutLeft( self.options.effectDuration,function(){
	self.closed = true;
	self.unbind();
}
,self.options.transition );
}
}
menu.show = function(){
	if(this.css('display') == 'none' && self.closed){
	this.SlideInLeft( self.options.effectDuration,function(){
	self.closed = false;
	if(self.options.autoHide){
	self.hover(function(){
	clearTimeout(self.timeout);
}
,function(){
	self.timeout = setTimeout( function(){
	menu.hide();
}
,self.options.blurHideDelay);
}
);
}
}
,self.options.transition );
}
}
}
);
}
;

CSS代码(rb_menu.css):

.menu{FONT-FAMILY:arial,verdana,sans-serif;POSITION:relative}
.rb_toggle{PADDING-RIGHT:5px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;LINE-HEIGHT:25px;PADDING-TOP:0px;HEIGHT:25px}
.rb_toggle SPAN{FONT-WEIGHT:bold;FONT-SIZE:11px;CURSOR:pointer;COLOR:#999;FONT-FAMILY:arial,verdana,sans-serif}
.rb_toggle SPAN.hover{COLOR:red}
.rb_menu{LEFT:50px;POSITION:absolute;TOP:0px}
.rb_menu UL{PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-TOP:0px;LIST-STYLE-TYPE:none}
.rb_menu LI{PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-TOP:0px;LIST-STYLE-TYPE:none}
.rb_menu LI{PADDING-RIGHT:10px;PADDING-LEFT:0px;FLOAT:left;PADDING-BOTTOM:0px;LINE-HEIGHT:25px;PADDING-TOP:0px;HEIGHT:25px}
.rb_menu A{FONT-SIZE:16px;COLOR:#f90;TEXT-DECORATION:none}
.rb_menu A:hover{TEXT-DECORATION:underline}
.rb_menu A.current{COLOR:#999}
.clearfix:unknown{CLEAR:both;DISPLAY:block;VISIBILITY:hidden;HEIGHT:0px;content:"."}
.clearfix{DISPLAY:inline-block}
* HTML .clearfix{HEIGHT:1%}
.clearfix{DISPLAY:block}

附件:下载该文件资源,减少时间成本(增值服务)