首页 > 网页制作 > CSS

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

admin CSS 2022-02-06 15:52:18 checkbox   css   导航栏"

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

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

结果:

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

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

CSS Code复制内容到剪贴板
  1. "nav-child">   
  2.      "checkbox" id="nav01"/>   
  3.          "nav01">             图标   
  4.               交通出行   
  5.               "choice-box">            图标   
  6.                  
  7.             
  8.           "nav-item">   
  9.                
        
    •                   
    • 动车
    •   
    •                   
    • 违章
    •   
    •                   
    • 机票
    •   
    •                   
      
  10.           
  
  •    

    接下来我选用 less

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

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

    说明:

    css3选择器:

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

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

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

    版权声明

    本文仅代表作者观点,不代表本站立场。
    本文系作者授权发表,未经许可,不得转载。
    本文地址:/web/CSS/77622.html

    留言与评论(共有 0 条评论)
       
    验证码:

    热门文章

    最近发表

    标签列表

    潘少俊衡

    | 桂ICP备2023010378号-4

    Powered By EmpireCMS

    爱享小站

    中德益农

    谷姐神农

    环亚肥料

    使用手机软件扫描微信二维码

    关注我们可获取更多热点资讯

    感谢潘少俊衡友情技术支持