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

---

效果图：

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

添加隐藏左边栏目按钮

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

下面为引用内容：

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

制作按钮样式

先找一款你喜欢的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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

样式制作完成后,压缩,然后添加进\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>
1
2
3
4
5

在</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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

效果图：

引用结束

结合我的配置进行修改

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

修改位置

主要变化：修改按钮位置，移到右边：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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

事件响应

因为修改了图标位置，事件响应时也要对应修改位置：缩小后设置为$(".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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

响应式：手机端隐藏按钮

手机端(当页面变小时)隐藏按钮：修改文件：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
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

    .left-col,.mymenucontainer {
        display:none
    }
1
2
3

效果图：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/636168