搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

如何使用CheckBox的属性制作纯css动态导航栏

发布时间：2023-01-02 20:09:54 来源：网络
.
帮别人的事做完就忘记，别人为自己做的事时时记着，哪怕这个人只有那么一次好，他也是曾经帮助过你的人。

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

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

结果：

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

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

CSS Code复制内容到剪贴板
  1. <divclass="nav-child">
  2. <inputtype="checkbox"id="nav01"/>
  3. <labelfor="nav01"><svg>图标</svg>
  4. 交通出行
  5. <spanclass="choice-box">　　　　　　　　　　　　<svg>图标</svg>
  6. </span>
  7. </label>
  8. <divclass="nav-item">
  9. <ul>
  10. <li>动车</li>
  11. <li>违章</li>
  12. <li>机票</li>
  13. </ul>
  14. </div>
  15. </div>

接下来我选用 less

CSS Code复制内容到剪贴板
  1. .nav-child{
  2. input[type='checkbox']:checked{
  3. +label{
  4. .choice-box{
  5. svg{
  6. transform:rotate(-90deg);
  7. transition:all0.3s;
  8. }
  9. }
  10. }
  11. ~.nav-item{
  12. display:none;
  13. }
  14. }
  15. }

编译之后生成css 就大功告成啦！！！

说明：

css3选择器：

+ 代表选择元素紧邻的元素

~ 代表选择元素同级的元素

以上所述是小编给大家介绍的使用CheckBox的属性制作纯css动态导航栏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

本文如何使用CheckBox的属性制作纯css动态导航栏到此结束。到不了的就是永远、忘不了的就是曾经。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章:
标签： CheckBox
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图