纯HTML+CSS实现可开关菜单

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

我想xiuno手机中菜单侧边弹出。BootStrap好像不支持。没找到相关内容。

oliolo
引用
我想xiuno手机中菜单侧边弹出。BootStrap好像不支持。没找到相关内容。
oliolo 我想xiuno手机中菜单侧边弹出。BootStrap好像不支持。没找到相关内容。

xiuno版本的bs好像没有这个过渡动画,bs框架感觉都快过时没人用了……

现在这年头技术真是一年一个样,跟不上时代了。

C
引用
oliolo我想xiuno手机中菜单侧边弹出。BootStrap好像不支持。没找到相关内容。 xiuno版本的bs好像没有这个过渡动画,bs框架感觉都快过时没人用了…… 现在这年头技术真是一年一...
C xiuno版本的bs好像没有这个过渡动画,bs框架感觉都快过时没人用了…… 现在这年头技术真是一年一个样,跟不上时代了。

bs的js组件根据官方文档的写居然无效[em_3]

C
引用
oliolo我想xiuno手机中菜单侧边弹出。BootStrap好像不支持。没找到相关内容。 xiuno版本的bs好像没有这个过渡动画,bs框架感觉都快过时没人用了…… 现在这年头技术真是一年一...
C xiuno版本的bs好像没有这个过渡动画,bs框架感觉都快过时没人用了…… 现在这年头技术真是一年一个样,跟不上时代了。

emlog pro  也是BootStrap框架。等BootStrap更新升级,是不是又会流行回来?

这个展开菜单不错,运行结果:

试了下,挺好使的

v2016
引用
Cxiuno版本的bs好像没有这个过渡动画,bs框架感觉都快过时没人用了…… 现在这年头技术真是一年一个样,跟不上时代了。 bs的js组件根据官方文档的写居然无效[em_3]
v2016 bs的js组件根据官方文档的写居然无效[em_3]

看来你研究过

1