jysht.github.io/global-menu.js at main · Insi360der/jysht.github.io · GitHub

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
document.body.insertAdjacentHTML("afterbegin", `
<style>
#menuBtn {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100000;
    background: #333;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}
.sideMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    background: #222;
    z-index: 99998;
    transform: translateX(-100%);
    transition: 0.3s ease;
    padding: 80px 20px 20px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.sideMenu.open {
    transform: translateX(0);
}
.pageBtn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}
.pageBtn:hover {
    background: #2980b9;
}

/* 二维码容器样式 */
.qrcode-box {
    margin-top: 20px;
    text-align: center;
    color: #fff;
    font-size: 12px;
}

.qrcode-box img {
    width: 100px;       /* 固定宽度 */
    height: 100px;      /* 固定高度，保持正方形 */
    margin: 8px auto;
    display: block;
    border-radius: 4px;
    background: #fff;
    object-fit: contain; /* 保持图片比例不变形 */
}

.loading-tip {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 99999;
    color: white;
    font-size: 12px;
    text-align: right;
    line-height: 1.5;
    background: rgba(0,0,0,0.4);
    padding: 6px 10px;
    border-radius: 6px;
    max-width: 250px;
}
</style>

<button id="menuBtn">菜单</button>
<div id="sideMenu" class="sideMenu">
    <button class="pageBtn" onclick="go('index.html')">林沛颖《揭阳上河图》</button>
    <button class="pageBtn" onclick="go('pages/liu.html')">刘益杰《潮粥烟火》</button>
    <button class="pageBtn" onclick="go('pages/pei.html')">詹培彦《人间烟火 耕织卷》</button>
    <button class="pageBtn" onclick="go('pages/xu.html')">徐楷泳《慢煮时光 细品家常》</button>
    <button class="pageBtn" onclick="go('pages/hao.html')">陈浩祺《潮音·戏影》</button>
    <button class="pageBtn" onclick="go('pages/linshuo.html')">林烁豪《嵌瓷里的红色征程》</button>
    <button class="pageBtn" onclick="go('pages/he.html')">何浩铭《门映鎏光》</button>
    <button class="pageBtn" onclick="go('pages/wu.html')">吴俊程《榕影金晖》</button>
    <button class="pageBtn" onclick="go('pages/huang.html')">黄志鹏《潮厝夜辉》</button>
    <button class="pageBtn" onclick="go('pages/zhen.html')">方镇耿《四境惊鸿》</button>
    <button class="pageBtn" onclick="go('pages/page5.html')">无《无》</button>
    <button class="pageBtn" onclick="go('pages/page5.html')">无《无》</button>
    <button class="pageBtn" onclick="go('pages/page5.html')">无《无》</button>

    <!-- 菜单底部二维码 -->
    <div class="qrcode-box">
        <img src="images/二维码.jpg" alt="联系二维码" />
        <span>投稿上传 扫码联络</span>
    </div>
</div>

<div class="loading-tip">
由于网站部署于GitHub海外服务器，3D模型加载速度会相对缓慢，首次加载约需10秒。实际加载时长受设备性能与网络环境影响<br>
PS:若遇到模型画面重叠问题，刷新页面即可<br>
PS:推荐开启加速器访问效果更佳哦qwq
</div>
`);

function go(path) {
    var encodedPath = encodeURI(path);
    if (window.location.pathname.includes('/pages/')) {
        window.location.href = '../' + encodedPath;
    } else {
        window.location.href = './' + encodedPath;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    var m = document.getElementById("menuBtn");
    var s = document.getElementById("sideMenu");
    if (m && s) {
        m.addEventListener("click", function() {
            s.classList.toggle("open");
        });
    }
});