无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 公司新闻 >

免软件完成WordPress 掩藏/显示信息侧面栏

时间:2021-02-19 18:21来源:未知 作者:jianzhan 点击:
默认设置显示信息侧面栏,点一下导航栏最右的“关掉侧面栏”,右边侧面栏消退,左边文章内容行为主体一部分彻底显示信息,而且导航栏内的文本变成“显示信息侧面栏”,点一下

默认设置显示信息侧面栏,点一下导航栏最右的“关掉侧面栏”,右边侧面栏消退,左边文章内容行为主体一部分彻底显示信息,而且导航栏内的文本变成“显示信息侧面栏”,点一下则全过程相反。

总体实际效果显著,以下图所示:

最先各自查询自身主题的行为主体款式是否id=“primary”,侧面栏又是否id=“sidebar”,并不是则改动之;此外宽度width值也依据网页页面宽度相应改动!

加上CSS款式

在style.css款式表格中加上以下款式:

/**掩藏显示信息侧面栏**/#primary.primary {width: 100%;} .sidebar {display: none;} 加上JS操纵

在网站相应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"; } } 加上掩藏/显示信息边栏按钮

加上按钮

依据必须在网页页面相应部位加上显示信息和掩藏按钮,编码:

<ul> <li class="r-hide"><a>掩藏边栏</a></li> </ul> 按钮款式

下列得出1个清理按钮的参照款式,能够依据必须自主调剂:

.r-hide li a { color: #999; line-height: 26px; margin: 0 5px 0 0; padding: 0 10px; display: block; border: 1pxsolid#ddd; border-radius: 2px; box-shadow: 0 1px1px rgba(0, 0, 0, 0.04); } .r-hide a:hover { background: #568abc; color: #fff; border: 1pxsolid#568abc; } 以上便是免软件完成WordPress 掩藏/显示信息侧面栏的方式,有必须的盆友能够试试,我blog文章内容页就应用了,大伙儿能够看看文章内容页侧面的掩藏边栏试试!

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信