纯HTML+CSS实现可开关菜单

老白 6个月前 379浏览 0评论

发现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>


发表评论