jQuery实现左右折叠布局

分享一个左右折叠布局的东东。一般做后台管理系统或是应用系统的时候会用到的。一般是左右布局，左边是导航菜单，右边是内容页。导航栏边上有一个折叠按钮，点击按钮，左边的导航菜单隐藏，右边的内容页占满整个屏幕。再次点击折叠按钮，恢复到默认的状态。代码很简单用jQuery实现这个折叠功能。
HTML代码：

<div id=“nav”>左边导航/div>
 <div id=“right_content”>
 <div id=“seperator”>折叠按钮</div>
 <div id=“content” >
 <p>右边内容区</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 </div>
 </div>
 </div>

CSS代码：

<style type=“text/css”>
 #nav {
 width:25%;
 float:left;
 background-color:#999
 }/*左边导航样式*/
 #right_content {
 width:75%;
 float:right;
 background-color:#CCC;
 position:relative
 }/*右边内容样式*/
 #seperator {
 background-color:#900;
 width:10px;
 height:30px;
 position:absolute;
 top:50%;
 border:solid 0px orange;
 }/*折叠按钮样式*/
 </style>

jQuery代码：

<script src=“jquery-1.4.2.js” type=“text/javascript”></script>
 <script type=“text/javascript”>
 $(function(){
 $(“.seperator”).toggle(function(event){
 $(“#nav”).animate({width:“0%”},100);
 $(“#right_content”).animate({width:“100%”},100);
 },
 function(event)
 {
 $(“#nav”).animate({width:“25%”},100);
 $(“#right_content”).animate({width:“75%”},100);
 })
 })
 </script>