免插件实现WordPress 隐藏/显示侧边栏

默认显示侧边栏,点击导航最右的“关闭侧边栏”,右侧侧边栏消失,左侧文章主体部分完全显示,并且导航内的文字变为“显示侧边栏”,点击则过程相反。

整体效果明显,如下图所示:

首先分别查看自己主题的主体样式是不是id=“primary”,侧边栏又是不是id=“sidebar”,不是则修改之;另外宽度width值也根据页面宽度相应修改!

添加CSS样式

在style.css样式表中添加如下样式:

  1. /**隐藏显示侧边栏**/
  2. #primary.primary {width: 100%;}
  3. .sidebar {displaynone;}

添加JS控制

在网站相应JS文件中添加以下代码:

  1. // 隐藏侧边
  2. function pr() {
  3. var R=document.getElementById(“sidebar”);
  4. var L=document.getElementById(“primary”);
  5. if (R.className==“sidebar”)
  6. {
  7. R.className=“widget-area”;
  8. L.className=“content-area”;
  9. }
  10. else
  11. {
  12. R.className=“sidebar”;
  13. L.className=“primary”;
  14. }
  15. }

添加隐藏/显示边栏按钮

添加按钮

根据需要在页面相应位置添加显示和隐藏按钮,代码:

  1. <ul>
  2.     <li class=“r-hide”><a>隐藏边栏</a></li>
  3. </ul>

按钮样式

以下给出一个美化按钮的参考样式,可以根据需要自行调整:

  1. .r-hide li a {
  2. color#999;
  3. line-height26px;
  4. margin: 0 5px 0 0;
  5. padding: 0 10px;
  6. displayblock;
  7. border1px solid #ddd;
  8. border-radius: 2px;
  9. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  10. }
  11. .r-hide a:hover {
  12. background#568abc;
  13. color#fff;
  14. border1px solid #568abc;
  15. }
分享到: 生成海报
avatar

热门文章

  • 一对一资讯网 为您提供可靠的服务

    一对一主机系统飞蝌云计算
    登录一对一资讯平台  

    登录

    忘记密码 ?