<!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" />
<title>Jquery打造的一款简洁弹性滑动菜单 - www.webdm.cn</title>
<script src="http://www.webdm.cn/images/20100914/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.webdm.cn/images/20100914/interface.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.webdm.cn/images/20100914/rb_menu.js" type="text/javascript" charset="utf-8"></script>
<style type="text/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
}
</style>
</head>
<body>
default behavior:
<div id="menu1" class="menu">
<div class="rb_toggle"><span>menu »</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 »</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 »</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>
<table width="728" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p></td>
</tr>
</table>
<p> </p>
</body>
</html>
文章来自：http://www.webdm.cn/webcode/3befb93e-dafe-4553-b4b6-638f803cb3a5.html