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

帮别人的事做完就忘记,别人为自己做的事时时记着,哪怕这个人只有那么一次好,他也是曾经帮助过你的人。

前提:很多时候、我们的网页都需要一个垂直的导航栏、可以分类、有分类、自然就有展开、关闭的功能、你还在使用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动态导航栏到此结束。到不了的就是永远、忘不了的就是曾经。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例