前提:很多时候,我们的
网页需要一个垂直导航条,它可以被
分类、分类,并且自然具有打开和
关闭的
功能。您还在使用jQuery
操作DOM来实现它吗然后你出去了!
方案:使用复选框的选中
属性,巧妙地制作导航栏。
结果uff1a
我们主要做这样的导航栏。
首先,我们编写相对HTML。由于时间问题,SVG不
处理到类中,所以这里给出SVG的空标签。如果你想看到效果,你可以在我的Git里得到一个叉子的拷贝。
CSS代码将内容
复制到剪贴板。
偶像
交通出行
图标 电机车
非法
飞机票
下一步,我选择少一些
CSS代码将内容复制到剪贴板。
导航子{
输入{
类型= 'checkbox:
检查{ }
+标签{
选择框{
SVG {
变换:旋转(- 90度);
过渡:所有的0.3s;
}
}
}
导航项{
显示:无;
}
}
}
编译完成后,CSS就完成了!!!
解释uff1a
CSS3选择器:
+代表选择元素旁边的元素。
表示同一级别选择元素的元素。
以上是一个小卷,您可以
介绍一下,使用复选框的属性来制作纯CSS动态导航栏。我们希望能帮助你。如果你有任何问题,请给我留言,萧边会及时给您回复。谢谢您
支持网站。