css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏

前提：很多时候、我们的网页都需要一个垂直的导航栏、可以分类、有分类、自然就有展开、关闭的功能、你还在使用jquery操作dom来制作吗？那你就out了！

方案：使用checkbox 的 checked 属性、巧妙地制作导航栏

结果：

我们主要制作成这样这样的的导航栏：

首先、我们写出相对的html  由于时间问题、svg没有处理到类中、所以这里给出svg的空标签、大家如果想看效果、可以到我的git里面fork一份

图标

交通出行

图标

• 动车
• 违章
• 机票

接下来我选用 less

.nav-child{

input[type='checkbox']:checked{

+label{

.choice-box{

svg{

transform: rotate(-90deg);

transition: all 0.3s;

}

}

}

~.nav-item{

display: none;

}