博客园侧边栏收缩与展开

博客园侧边栏收缩与展开

全部样式

//CSS部分

侧边栏隐藏和展开，这里是设置那个侧边栏按钮的。我们在这里可以随意的发挥，自定义其样式。其实在这里有许多冗余的地方，大家自己开脑洞，改变属于自己的博客园风格。。。

/*侧边栏的展开与收回*/
#fry_append {
    right: 10%;
    width: 46px;
    top: 10%;
    opacity: 0.3377; 
    position: fixed;
    z-index: 98;
    background-color: #fff;
    font-size: 12px;
    margin: 10px 0 0;
    padding: 5px;
    border: 1px solid  #000000 ;
    border-radius: 5px;
    float: right;
    /*
   box-shadow: 0px 0px 15px 5px #FF3300 inset;
   background: url(https://www.cnblogs.com/images/cnblogs_com/cainiao-chuanqi/1532380/t_%e5%9b%bd%e6%97%97.jpg) no-repeat; 
}
//调节div的位置。。。
//这部分大家可以随意发挥。。。
*/
#fry_append div:first-of-type {
    margin-top: 5px;
}

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

}

//首页HTML代码

 $('#mainContent').css({'display':'block','width':'123%'});这里的参数大家跟自己的博客皮肤相对应，可以自己慢慢调节。正常最完美的是100%的宽度，小细节自己定义。。。

<!--  页面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%'});
//这里可以适当的调整百分比，来满足页面的需求。。。最佳是100%宽度
    }
});

</script>