Typecho主题Pinghsu - 添加移动端导航菜单关闭
in Notes with 0 comment

Typecho主题Pinghsu - 添加移动端导航菜单关闭

in Notes with 0 comment

刚开始使用Typecho时,看上了Chakhsu的主题:Pinghsu,贼漂亮有没有😁
很多朋友反应主题在移动端的导航菜单不能关闭,F12看了一下,由于菜单的展开完全用CSS(hover)实现的,所以在移动端只能靠点击除❌以外的其他位置才能关闭菜单。还看到代码后面有个onclick,想必作者考虑过js,但是最终还是没有使用🤣

开始正题

一共需要修改两个文件

header.php
style.min.css
修改header.php
ctrl+F找到下面这一行

<div class="navbar-mobile-menu" onclick="">

修改为

<div class="navbar-mobile-menu" onclick="navbarSwith()">

并在这一行上面另起一行加入下面的内容

<script>function navbarSwith(){document.getElementsByClassName("navbar-mobile-menu")[0].classList.toggle("navbar-mobile-menu-on")}</script>

修改style.min.css
由于CSS是压缩的,修改的时候要仔细点啊。

先ctrl+F找到下面的内容(只有1处位置)

.navbar-mobile-menu:hover>ul

修改为

.navbar-mobile-menu-on ul

再ctrl+F找到下面的内容(还有9处位置,建议使用“替换”工具)

.navbar-mobile-menu:hover

修改为

.navbar-mobile-menu-on

至此,完成,去试试效果吧😜

其他说明

修改后,点开菜单后必需手动点击❌才能关闭菜单,已不能通过滑动关闭,有得有失,最终改回原版。

Responses