Typecho主题Pinghsu - 添加移动端导航菜单关闭
刚开始使用Typecho时,看上了Chakhsu的主题:Pinghsu,贼漂亮有没有😁
很多朋友反应主题在移动端的导航菜单不能关闭,F12看了一下,由于菜单的展开完全用CSS(hover)实现的,所以在移动端只能靠点击除❌以外的其他位置才能关闭菜单。还看到代码后面有个onclick,想必作者考虑过js,但是最终还是没有使用🤣
8月14日更新了一下(刚发现classList原本就有toggle用法,我却绕了个圈去实现toggle😓)
开始正题
一共需要修改两个文件
- 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
至此,完成,去试试效果吧😜
其他说明
这个修改方法是很基础的了,属于必改内容,由于我还修改了一些我个人认为冗余的其他相关内容(内容不多,但是不容易表述出来😖),所以这个基础方法我是没有测试的,但是应该是没问题的,请放心食用,如过真的有什么问题,请留言吧!😎
已经使用原版主题测试过了,是没问题的,请放心食用。
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
老哥,感谢教程,正在为这个苦恼,我也是刚从WordPress转到typecho来的,然后发现了PInghsu主题,就像您说的:贼漂亮,所以使用上了,发现了些小问题,自己能修复,但菜单这个问题我一直不知道怎么搞定,感谢教程,欢迎老哥串门指导。-----一个刚使用Typecho的小萌新.
感谢大佬分享
这个不是自动的嘛,我测试过,后台打开PJAX加速或者移动端点击延迟消除其中一项滑动屏幕就自动关闭,IOS和好一点的安卓完美,当然一些老掉牙的安卓就得用这方法手动关闭了
这个不是自动的嘛,我测试过,后台打开PJAX加速或者移动端点击延迟消除其中一项滑动屏幕就自动关闭,IOS和好一点的安卓完美,当然一些老掉牙的安卓就得用这方法手动关闭了
大佬厉害,之前反馈给作者,作者说按其他地方就好 ,没想到大佬解决了,谢谢