博客园侧边栏收缩与展开-测试

##CSS部分 

#fry_append {
    right: 1%;
    width: 46px;
    top: 0%;
    opacity: 0.37; 
    position: fixed;
    z-index: 98;
    background-color: #fff;
    font-size: 12px;
    margin: 10px 0 0;
    padding: 5px;
    border: 1px solid #55895b;
    border-radius: 5px;
    float: right;

}
#fry_append div:first-of-type {
    margin-top: 5px;
}

#fry_append div {
    text-align: center;
    cursor: pointer;
    margin-top: 10px;
    color: #CC9966;
}

首页HTML代码

<!--  页面HTML/JS部分 页面展开动画-->
<div id="fry_append">
 
<div id="fry_sidebar">侧边栏</div>

</div>
<!-- 页面展开动画-->
<script type="text/javascript">
function my_unfold(){
    width_main=$('#main').width();
    height_main=$('#main').height();
    time=1000;
    function unfoldLeft(width,height,time) {
        $('#main').animate({
            'width': '0%',
            'height': '0%',
            opacity: '0'
        }, 0,'linear');
        $('#main').animate({
            'width': '+'+width_main,
            'height': '+'+height_main,
            opacity: '1'
        }, time,'linear');
    }
    unfoldLeft(width_main,height_main,time);
}
</script>

<!--END 页面展开动画-->
<!-- 展开侧边栏 -->
<script type="text/javascript">
$('#main').append('<div id="fry_append"><hr/><div id="fry_sidebar">侧边栏</div></div>');
$('#fry_sidebar').click(function(){
    $('#mainContent .forFlow').css({'margin-right':'0px'});
    if($('#sideBar').css('display')=='none'){
        var width=$(window).width()*0.93;
        var width1=$(window).width()*0.97-300;//这里可以根据自己的页面适当的调整，来控制侧边栏占比大小。。。
        var width2=($(window).width()-280)/2;
        if(width*0.35<230){
                $('#mainContent').css({'display':'none'});
                $('#sideBar').css({'display':'block','width':'280','margin-right':width2+'px'});
        }else{
                $('#sideBar').css({'display':'block','width':'277px','margin':'none','float':'right'});
                $('#mainContent').css({'display':'block','width':width1+'px'});
        }
    }
    else{
        $('#sideBar').css({'display':'none'});
        $('#mainContent').css({'display':'block','width':'123%'});
//这里可以适当的调整百分比，来满足页面的需求。。。
    }
});

</script>