hexo+yilia添加隐藏左边栏目按钮

文章目录

添加隐藏左边栏目按钮
- 制作按钮样式
- 添加按钮到相应的位置
结合我的配置进行修改
- 修改位置
- 事件响应
- 响应式：手机端隐藏按钮
:bug:

效果图：

点击按钮时，缩进左侧边栏，再次点击再弹出来。

添加隐藏左边栏目按钮

参考：添加隐藏左边栏目按钮

下面为引用内容：

折腾了一个下午,终于把隐藏左边侧边栏目的效果实现了. 实现了点击按钮隐藏侧边栏, 查找和修改源码实在是太麻烦了.

制作按钮样式

先找一款你喜欢的CSS菜单按钮切换,或者自己实现一个,我在网上找到一款比较简单的样式,稍微做了下修改.

.mymenucontainer {display:block;cursor:pointer;left:0;top:0;width:35px;height:35px;z-index:9999;position:fixed;
}
.bar1 {width:35px;height:3px;background-color:#333;margin:6px 0;transition:0.4s;-webkit-transform:rotate(-45deg) translate(-8px,8px);transform:rotate(-45deg) translate(-8px,8px);
}
.bar2 {width:35px;height:3px;background-color:#333;margin:6px 0;transition:0.4s;opacity:0;
}
.bar3 {width:35px;height:3px;background-color:#333;margin:6px 0;transition:0.4s;-webkit-transform:rotate(45deg) translate(-4px,-6px);transform:rotate(45deg) translate(-4px,-6px);
}
.change .bar1 {-webkit-transform:rotate(0deg) translate(0px,0px);transform:rotate(0deg) translate(0px,0px);
}
.change .bar2 {opacity:1;
}
.change .bar3 {-webkit-transform:rotate(0deg) translate(0px,0px);transform:rotate(0deg) translate(0px,0px);
}

样式制作完成后,压缩,然后添加进\themes\yilia\source\main.0cf68a.css文件中,添加在最前面即可

添加按钮到相应的位置

打开\themes\yilia\layout\layout.ejs文件, 找到<div class="left-col",在其上面添加如下代码:

<div class="mymenucontainer" onclick="myFunction(this)"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div>
</div>

在</body>之后, </html>前添加如下Js代码:

<script>var hide = false;function myFunction(x) {x.classList.toggle("change");if(hide == false){$(".left-col").css('display', 'none');$(".mid-col").css("left", 6);$(".tools-col").css('display', 'none');$(".tools-col.hide").css('display', 'none');hide = true;}else{$(".left-col").css('display', '');$(".mid-col").css("left", 300);$(".tools-col").css('display', '');$(".tools-col.hide").css('display', '');hide = false;}}
</script>

重新生成文件,部署即可看到效果, 可以看看我的博客效果

效果图：

引用结束

结合我的配置进行修改

因为我的左侧边栏添加了心知天气（如下图），所以按钮不能放在一起，因此进行了修改：

修改位置

主要变化：修改按钮位置，移到右边：left: 260px;，修改bar1,bar2,bar3的颜色：background-color: #0087ca;：修改文件：H:\Hexo\themes\yilia\source\main.0cf68a.css

.mymenucontainer {display: block;cursor: pointer;left: 260px;  /*原来： left:0; */top: 0;width: 35px;height: 35px;z-index: 9999;position: fixed;
}
.bar1 {width: 35px;height: 3px;background-color: #0087ca;  /*原来： background-color:#333; */margin: 6px 0;transition: 0.4s;-webkit-transform: rotate(-45deg) translate(-8px, 8px);transform: rotate(-45deg) translate(-8px, 8px);
}

事件响应

因为修改了图标位置，事件响应时也要对应修改位置：缩小后设置为$(".mymenucontainer").css('left', '0');,展开：$(".mymenucontainer").css('left', '260px');。
修改文件：H:\Hexo\themes\yilia\layout\layout.ejs

</body><!-- 《添加折叠按钮脚本 -->
<script>var hide = false;function myFunction(x) {x.classList.toggle("change");if(hide == false){$(".left-col").css('display', 'none');$(".mid-col").css("left", 6);$(".tools-col").css('display', 'none');$(".tools-col.hide").css('display', 'none');hide = true;$(".mymenucontainer").css('left', '0');}else{$(".left-col").css('display', '');$(".mid-col").css("left", 300);$(".tools-col").css('display', '');$(".tools-col.hide").css('display', '');hide = false;$(".mymenucontainer").css('left', '260px');}}
</script>
<!-- 添加折叠按钮脚本》 --></html>

响应式：手机端隐藏按钮

手机端(当页面变小时)隐藏按钮：修改文件：H:\Hexo\themes\yilia\source\main.0cf68a.css，找到@media screen and (max-width:800px)下面的内容：

@media screen and (max-width:800px) {#container, body, html {height:auto;overflow-x:hidden;overflow-y:auto}#mobile-nav {display:block}.body-wrap {margin-bottom:0}.left-col{display:none}
}

在.left-col中添加一个按钮的标签：

    .left-col,.mymenucontainer {display:none}

效果图：