博客園側邊欄收縮與展開

博客園側邊欄收縮與展開

全部樣式

//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>