我写带菜单栏的网页时，基本都是用响应式设计来适应移动终端，比如隐藏不重要的菜单选项或者创建菜单按钮来控制菜单的打开和关闭。之前用JavaScript打开和关闭菜单，但是最近在网上看到有人用CSS和HTML实现这个功能，真的让我觉得手里有锤子什么都可以钉。

在实现之前，让我们看一下HTML标记和输入类型：

标签

标签标签为输入元素定义了一个标签。

标签元素不会向用户呈现任何特殊效果。然而，它提高了鼠标用户的可用性。如果单击标签元素内的文本，将触发此控件。也就是说，当用户选择标签时，浏览器会自动将焦点转向与标签相关的表单控件。

标签标签的for属性应该与相关元素的id属性相同。

输入类型：复选框

输入类型=“复选框”定义了一个复选框。

复选框允许用户从有限数量的选项中选择零个或多个选项。

下面是演示的代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title menu demo/title link rel=' style ' href=' https://cdn . bootscs.com/bootstrap/3 . 3 . 7/CSS/bootstrap . min . CSS ' rel=' external no follow ' style。演示{ text-align : center；}/*单击复选框时，菜单打开或显示*/#菜单-复选框：已选中~。nav {display :无；}/*隐藏复选框*/#菜单的复选框-复选框{ display: none} .nav ul { list-style : none；margin : 0；padd : 0；font-size : 20px；} .glyphicon-menu-hamburger { font-size : 30px；边距-top : 50px；} /style/headbody div class='demo '！-标签绑定复选框-标签为=' menu-checkbox ' span class=' glyphicon glyphicon-menu-hamburger '/标签输入id=' menu-checkbox ' type=' checkbox ' div class=' nav ' ul liaa/Li libbb/Li liccc/Li liddd/Li/ul/div/div/body/html效果：

点击上面的汉堡图标，菜单就会显示和隐藏。

虽然是一件简单的事情，但对我来说更多的是一种启发。

以上是边肖的介绍，不用JavaScript实现菜单的开合效果。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！