纯HTML+CSS实现可开关菜单_CSS学习

资料来源：网络整理时间：2023/3/4 1:05:53 共计：3600 浏览

发现label/for这个用法挺有意思的，可以通过牵连点击checkbox实现菜单的开关效果。

代码示例：（保存进test.html）

<!DOCTYPE HTML><html><head><style>
body {text-align:center;}
label {cursor:pointer;font-weight:bold;}
#shit:checked ~ #menu {display:block;}
#shit, #menu {display:none;}</style></head><body><label for="shit">开关菜单</label><input id="shit" type="checkbox" /><div id="menu"><a href="https://assbbs.com" target="_blank">[选项1]</a><br /><a href="https://assbbs.com" target="_blank">[选项2]</a><br /><a href="https://assbbs.com" target="_blank">[选项3]</a><br /></div></body></html>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：video标签播放mp4视频_前端技术 | ·下一条：CSS颜色透明度设置，包括背景透明度、浏览器兼容_CSS学习