刚开始使用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
至此,完成,去试试效果吧😜
其他说明
修改后,点开菜单后必需手动点击❌才能关闭菜单,已不能通过滑动关闭,有得有失,最终改回原版。
评论