很多的网站都是默认显示侧边栏,为了提高阅读体验,有的提供了一个"隐藏/显示侧边栏 "功能,通过点击“关闭侧边栏”,右侧侧边栏消失,左侧文章主体部分完全显示,实现了网页的全屏浏览,再次点击则过程相反。为了给读者一个良好的体验折腾,将侧边栏的开关给加上了,代码源自百度,样式基于layui修订。
动图演示:
直接使用本站进行体验更直观
注意:首先分别查看自己主题的主体样式是不是id=“primary”,侧边栏又是不是id=“sidebar”,不是则修改之;另外宽度width值也根据页面宽度相应修改!
CSS样式:
/**隐藏显示侧边栏**/ #primary.primary {width: 100%;} .sidebar {display: none;}
请将以上代码加入CSS文件中
JS函数:
// 隐藏侧边 function pr() { var R=document.getElementById("sidebar"); var L=document.getElementById("primary"); if (R.className=="sidebar") { R.className="widget-area"; L.className="content-area"; } else { R.className="sidebar"; L.className="primary"; } }
请将以上js代码引入主页或复制进已有的js文件中
调用按钮:
根据需要在页面相应位置添加显示和隐藏按钮,代码如下:
当然,以上代码或许过于简单,也不美观,可以按以下格式进行美化
本站基于layui的样式代码如下:
侧边
.layui-form-switch { height: 100%; margin-top: -2px; line-height: 10px; border-radius:0px; padding: 3.5px 2px; } .layui-form-switch i { width: 12px; height: 12px; } .cblshousuo { float: right; /*width: 180px;*/ height: 100%; } .cblwenzi { /*color: #fff;*/ /*border-radius: 2px; background: #5FB878;*/ font-size: 12px; padding: 2px 5px; border-left: 1px solid #d2d2d2; border-top: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; }
暂无评论