分享一个左右折叠布局的东东。一般做后台管理系统或是应用系统的时候会用到的。一般是左右布局,左边是导航菜单,右边是内容页。导航栏边上有一个折叠按钮,点击按钮,左边的导航菜单隐藏,右边的内容页占满整个屏幕。再次点击折叠按钮,恢复到默认的状态。代码很简单用jQuery实现这个折叠功能。
HTML代码:
<div id=“right_content”>
<div id=“seperator”>折叠按钮</div>
<div id=“content” >
<p>右边内容区</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
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 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:还可以给折叠按钮加工折叠前后的样式。
占沙发了
看你最近很充实,分享了很多技术文章
上班太过充实了,加班啊加班
额,嘿嘿,串门来了。
求你的主题啊!!!呵呵……
神马主题?现在用的这个主题?
@陈大浩
@a
@a
不错的文章,学习一下
路过看看,博客不错!!