注:该篇文章已与我的个人博客同步更新。欢迎移步https://cqh-i.github.io/体验更好的阅读效果。
折腾了一个下午,终于把隐藏左边侧边栏目的效果实现了. 实现了点击按钮隐藏侧边栏, 查找和修改源码实在是太麻烦了.
制作按钮样式
先找一款你喜欢的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>
在之后, 添加如下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>
重新生成文件,部署即可看到效果, 可以看看我的博客效果