jQuery实现左右折叠布局

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

HTML代码：

<divid=“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代码：

<styletype=“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代码：

<scriptsrc=“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>

PS:还可以给折叠按钮加工折叠前后的样式。

《双陈记》情侣博客

jQuery实现左右折叠布局

已经有10位童鞋留言了，还不来盖楼！