《双陈记》情侣博客

位置:主页 > 前端设计 > jQuery实现左右折叠布局

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>

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



无觅相关文章插件

已经有10位童鞋留言了,还不来盖楼!

  1. 占沙发了
    看你最近很充实,分享了很多技术文章

  2. 额,嘿嘿,串门来了。

  3. 求你的主题啊!!!呵呵……

  4. IT路人

    不错的文章,学习一下

  5. 路过看看,博客不错!!

love730.com
To:双陈记

 疑问 冷笑 悲伤 坏蛋 感叹 微笑 脸红 大笑 吃惊 惊讶 困惑 酷 大声笑 恼火 古怪

您还可以输入300个字插入图片