Shen Huang's Blog
0%

Hexo yilia 主题添加隐藏左边栏目按钮

Posted on Edited on

1. 前言

实现了一下隐藏左边侧边栏目的效果。点击按钮时，缩进左侧边栏，再次点击再弹出来

2. 制作按钮样式

在 source-src/css 下面增加一个文件 left-menu.scss 然后引入到 main.scss

1
@import "./left-menu";

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// 折叠按钮脚本 CSS
.hamburger {
  left: 260px;
  position: fixed;
  top: 0;
  // left: 0;
  cursor: pointer;
  width:35px;
  height:35px;
	z-index:9999;
  display:block;
}

.bar {
  display: block;
  
  width:35px;
	height:3px;
  margin:6px 0;

  background: white;
  
  transition:0.25s;
  -webkit-transition:0.25s;
  -webkit-user-select: none;
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;          
}

.bar:nth-child(1) {
  transform:translate(-2px,10px) rotate(135deg);
  // -webkit-transform: rotate(135deg) translate(-2px, 10px);
}

.bar:nth-child(2) {
  opacity: 0;
}

.bar:nth-child(3) {
  transform:translate(-2px,-8px) rotate(-135deg);
  // -webkit-transform: rotate(-135deg) translate(-2px, -8px);

}

.animate .bar:nth-child(1) {
  transform:translate(0px,0px) rotate(0deg);
  // -webkit-transform: rotate(0deg) translate(0px, 0px);
  background: #4d4d4d;
}

.animate .bar:nth-child(2) {
  opacity: 1;
  background: #4d4d4d;
}

.animate .bar:nth-child(3) {
  transform:translate(0px,0px) rotate(0deg);
  // -webkit-transform: rotate(0deg) translate(0px, 0px);
  background: #4d4d4d;
}

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

1
2
3
4
5
6
<!-- Memu icon -->
<div class="hamburger" onclick="animateMenu(this)">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>

在 </body> 之后, </html> 前添加如下 JS 代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 添加折叠按钮脚本 -->
<script>
	var hide = false;
	function animateMenu(x) {
			x.classList.toggle("animate");
			if(hide == false){
					$(".left-col").css('display', 'none');
          $(".mid-col").css("left", '10px');
          $(".hamburger").css('left', '4px');
					hide = true;
			}else{
					$(".left-col").css('display', '');
          $(".mid-col").css("left", '300px');
          $(".hamburger").css('left', '260px');
					hide = false;
			}
	}
</script>
<!-- 添加折叠按钮脚本 -->

通过
1
npm run dev

得到新的显示效果。

3. Mobile 隐藏左边栏目

在 source-src/css 的 mobile.scss 增加

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

4. 参考

因为我们是朋友，所以你可以使用我的文字，但请注明出处：http://alwa.info