前提：很多时候，我们的网页需要一个垂直导航条，它可以被分类、分类，并且自然具有打开和关闭的功能。您还在使用jQuery操作DOM来实现它吗然后你出去了！

方案：使用复选框的选中属性，巧妙地制作导航栏。

结果uff1a

我们主要做这样的导航栏。


首先，我们编写相对HTML。由于时间问题，SVG不处理到类中，所以这里给出SVG的空标签。如果你想看到效果，你可以在我的Git里得到一个叉子的拷贝。

CSS代码将内容复制到剪贴板。




偶像
交通出行
图标




电机车
非法
飞机票







下一步，我选择少一些

CSS代码将内容复制到剪贴板。


导航子{
输入{类型= 'checkbox：检查{ }
+标签{
选择框{
SVG {
变换：旋转（- 90度）；
过渡：所有的0.3s；
}
}
}
导航项{
显示：无；
}
}
}




编译完成后，CSS就完成了！！！

解释uff1a

CSS3选择器：

+代表选择元素旁边的元素。

表示同一级别选择元素的元素。

以上是一个小卷，您可以介绍一下，使用复选框的属性来制作纯CSS动态导航栏。我们希望能帮助你。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。