博客园侧边栏收缩与展开
//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>