zhangdocs 1.1.12 → 1.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
<div class="nav">
|
|
2
|
-
<div class="
|
|
3
|
-
|
|
2
|
+
<div class="nav-header">
|
|
3
|
+
<div class="logo">
|
|
4
|
+
<%= title %>
|
|
5
|
+
</div>
|
|
6
|
+
<button class="nav-toggle" id="nav-toggle" aria-label="切换导航菜单">
|
|
7
|
+
<span></span>
|
|
8
|
+
<span></span>
|
|
9
|
+
<span></span>
|
|
10
|
+
</button>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="nav-menu" id="nav-menu">
|
|
13
|
+
<%- menu_html -%>
|
|
4
14
|
</div>
|
|
5
|
-
<%- menu_html -%>
|
|
6
15
|
</div>
|
|
@@ -193,5 +193,50 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
|
|
|
193
193
|
document.body.removeChild(textArea);
|
|
194
194
|
}
|
|
195
195
|
});
|
|
196
|
+
|
|
197
|
+
// 移动端导航菜单折叠/展开功能
|
|
198
|
+
(function() {
|
|
199
|
+
function initNavToggle() {
|
|
200
|
+
var navToggle = document.getElementById('nav-toggle');
|
|
201
|
+
var navMenu = document.getElementById('nav-menu');
|
|
202
|
+
|
|
203
|
+
if (navToggle && navMenu) {
|
|
204
|
+
// 绑定点击事件
|
|
205
|
+
navToggle.onclick = function(e) {
|
|
206
|
+
e.preventDefault();
|
|
207
|
+
e.stopPropagation();
|
|
208
|
+
navToggle.classList.toggle('nav-toggle-active');
|
|
209
|
+
navMenu.classList.toggle('nav-menu-open');
|
|
210
|
+
};
|
|
211
|
+
|
|
212
|
+
// 点击菜单项后自动收起菜单（移动端）
|
|
213
|
+
if (window.innerWidth <= 768) {
|
|
214
|
+
setTimeout(function() {
|
|
215
|
+
var menuLinks = navMenu.querySelectorAll('a');
|
|
216
|
+
menuLinks.forEach(function(link) {
|
|
217
|
+
link.onclick = function() {
|
|
218
|
+
navToggle.classList.remove('nav-toggle-active');
|
|
219
|
+
navMenu.classList.remove('nav-menu-open');
|
|
220
|
+
};
|
|
221
|
+
});
|
|
222
|
+
}, 200);
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
// 立即尝试初始化
|
|
228
|
+
initNavToggle();
|
|
229
|
+
|
|
230
|
+
// DOM 加载完成后再次初始化
|
|
231
|
+
if (document.readyState === 'loading') {
|
|
232
|
+
document.addEventListener('DOMContentLoaded', initNavToggle);
|
|
233
|
+
} else {
|
|
234
|
+
setTimeout(initNavToggle, 100);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
// 延迟初始化（处理动态显示的情况）
|
|
238
|
+
setTimeout(initNavToggle, 500);
|
|
239
|
+
setTimeout(initNavToggle, 1000);
|
|
240
|
+
})();
|
|
196
241
|
</script>
|
|
197
242
|
<% include footer.ejs %>
|
|
@@ -20,11 +20,11 @@ body,html
|
|
|
20
20
|
color:#61dafb
|
|
21
21
|
@media mq-mobile
|
|
22
22
|
float: none
|
|
23
|
-
padding: 0
|
|
23
|
+
padding: 0
|
|
24
24
|
font-size: 20px
|
|
25
|
-
text-align:
|
|
26
|
-
border-bottom:
|
|
27
|
-
margin-bottom:
|
|
25
|
+
text-align: left
|
|
26
|
+
border-bottom: none
|
|
27
|
+
margin-bottom: 0
|
|
28
28
|
img
|
|
29
29
|
vertical-align: middle
|
|
30
30
|
margin: -4px 0 0 0
|
|
@@ -48,11 +48,72 @@ $hover-color = #1ABC9C // 悬停绿色
|
|
|
48
48
|
width: 100%
|
|
49
49
|
@media mq-mobile
|
|
50
50
|
height: auto
|
|
51
|
+
min-height: auto
|
|
51
52
|
position: relative
|
|
52
|
-
padding:
|
|
53
|
+
padding: 0
|
|
53
54
|
line-height: 1.5
|
|
54
55
|
border-bottom: 1px solid $border-color
|
|
55
56
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1)
|
|
57
|
+
.nav-header
|
|
58
|
+
@media mq-mobile
|
|
59
|
+
display: flex
|
|
60
|
+
justify-content: space-between
|
|
61
|
+
align-items: center
|
|
62
|
+
padding: 12px
|
|
63
|
+
border-bottom: 1px solid rgba(0,0,0,0.1)
|
|
64
|
+
@media (min-width: 769px)
|
|
65
|
+
display: block
|
|
66
|
+
padding: 0
|
|
67
|
+
border-bottom: none
|
|
68
|
+
.logo
|
|
69
|
+
float: left
|
|
70
|
+
padding: 10px 20px 0 0
|
|
71
|
+
font-size: 24px
|
|
72
|
+
color: #61dafb
|
|
73
|
+
.nav-menu
|
|
74
|
+
@media (min-width: 769px)
|
|
75
|
+
display: block
|
|
76
|
+
height: 100%
|
|
77
|
+
@media mq-mobile
|
|
78
|
+
overflow-y: hidden
|
|
79
|
+
transition: max-height 0.3s ease-out
|
|
80
|
+
max-height: 0
|
|
81
|
+
&.nav-menu-open
|
|
82
|
+
max-height: 70vh
|
|
83
|
+
overflow-y: auto
|
|
84
|
+
-webkit-overflow-scrolling: touch
|
|
85
|
+
transition: max-height 0.5s ease-in
|
|
86
|
+
ul
|
|
87
|
+
@media mq-mobile
|
|
88
|
+
display: block
|
|
89
|
+
.nav-toggle
|
|
90
|
+
@media mq-mobile
|
|
91
|
+
display: flex
|
|
92
|
+
flex-direction: column
|
|
93
|
+
justify-content: space-around
|
|
94
|
+
width: 28px
|
|
95
|
+
height: 28px
|
|
96
|
+
background: transparent
|
|
97
|
+
border: none
|
|
98
|
+
cursor: pointer
|
|
99
|
+
padding: 0
|
|
100
|
+
z-index: 100
|
|
101
|
+
span
|
|
102
|
+
width: 100%
|
|
103
|
+
height: 3px
|
|
104
|
+
background: $text-color
|
|
105
|
+
border-radius: 3px
|
|
106
|
+
transition: all 0.3s ease
|
|
107
|
+
transform-origin: center
|
|
108
|
+
&.nav-toggle-active
|
|
109
|
+
span:nth-child(1)
|
|
110
|
+
transform: rotate(45deg) translate(7px, 7px)
|
|
111
|
+
span:nth-child(2)
|
|
112
|
+
opacity: 0
|
|
113
|
+
span:nth-child(3)
|
|
114
|
+
transform: rotate(-45deg) translate(7px, -7px)
|
|
115
|
+
@media (min-width: 769px)
|
|
116
|
+
display: none
|
|
56
117
|
ul
|
|
57
118
|
list-style: none
|
|
58
119
|
position: relative
|
|
@@ -61,7 +122,6 @@ $hover-color = #1ABC9C // 悬停绿色
|
|
|
61
122
|
overflow-x:auto
|
|
62
123
|
height:100%
|
|
63
124
|
@media mq-mobile
|
|
64
|
-
display: flex
|
|
65
125
|
flex-direction: column
|
|
66
126
|
width: 100%
|
|
67
127
|
overflow: visible
|
|
@@ -345,6 +405,8 @@ table
|
|
|
345
405
|
height: 24px
|
|
346
406
|
cursor: pointer
|
|
347
407
|
z-index: 0
|
|
408
|
+
@media mq-mobile
|
|
409
|
+
display: none
|
|
348
410
|
|
|
349
411
|
.page-toc
|
|
350
412
|
transition: all 0.3s ease
|