来自Ramin的jQuery plugin，很简单的方法就实现了Sliding Menu的效果。先点击看下效果吧。在Wordpress模板里放置这样的导航栏也很简单。下面是简单的步骤：

首先下载rb_menu.js，其次在<header>处写下code：

<script src=”js/rb_menu.js” type=”text/javascript” charset=”utf-8″></script>

然后在PHP页面中放置html代码：

<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>
<script>$(’#menu1′).rb_menu();

</script>

相对应的CSS代码如下：

.menu {
font-family: arial, verdana, sans-serif;
position: relative;
}

.rb_toggle {
height: 25px;
line-height: 25px;
padding: 0 5px 0 0;
}
.rb_toggle span {
color: #999;
font-size: 11px;
font-weight: bold;
font-family: arial, verdana, sans-serif;
cursor: hand;
cursor: pointer;
}
.rb_toggle span.hover {
color: red;
}

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

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

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

.clearfix {display: inline-block;}

当然你也可以根据自己的需要做些更改。如果有什么不明白的可以给我留言也可以去原作者那直接回复留言就可以了。