css3 checked属性写导航目录

dabai 发布于2019-08-29 11:01 / 1033人阅读

摘要：今天要教一个导航目录因为其实一般导航会有二级目录，二级目录的展开或者隐藏需要用到鼠标点击事件的监听，所以一般我们会用写，今天，要教完全用的某个属性写一个可以隐藏二级目录的方法。

今天要教一个导航目录
因为其实一般导航会有二级目录，二级目录的展开或者隐藏需要用到鼠标点击事件的监听，所以一般我们会用js写，今天，要教完全用css3 的某个属性写一个可以隐藏二级目录的方法。先上效果图

从html代码来看，是不是很简单。
需要用到的属性就是 css3 的 input :checked
里面ul 和li 的css就不说了
首先需要把input隐藏并且覆盖整个li，不然无法触发checked 属性

        .admin-sidebar-list>li input {
              position: absolute;
              width: 100%;
              height: 48px;
              z-index: 10;
              opacity: 0;
        }

li 下面的ul也必须隐藏掉

        .admin-sidebar-list>li ul{
            margin: 0 0 0 0;
            list-style-type:none;
            padding-left: 20px;
            display: none;
        }

上面的几个属性你们懂么？嗯，不懂自己查啊，简单的。
然后要给input 写上checked属性

.admin-sidebar-list>li input:checked ~ul{
      display: block;
      -webkit-animation-name: opacityChange; 
      -webkit-animation-duration: 1s; 
}

可以给隐藏显示写一个动画也可以不写
写的话可以这样写，不过得是谷歌内核的浏览器

@-webkit-keyframes opacityChange {
    0% {
        opacity: 0.3; 
    }
    10% {
        opacity: 0.8; 
    }
    100% {
        opacity: 1; 
    }
}

余下的就是用我们常见的:hover 鼠标悬停变换颜色

        .admin-sidebar-list>li ul li:hover{
              background-color: #eee;
        }

跟着姐姐学前端，月薪上万不是梦呢。不过首先你得先关注我，并转发呢，这样我们的友谊才能天长地久。
说正经的，如果我们还在写html css js或者是jQuery这种三合一的又大又长的项目，css能做到的就不要用js写了，好么～

关注个人订阅号：有一个姑娘（int_sun）三克油思密达～

云服务器 GPU云服务器 jsp实现导航目录 linux目录属性服务器目录可写新浪云 check

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111367.html

用纯css实现Tab切换

摘要：所以当我们思考能否用来实现时还应考虑到的结构，能不能构造出满足已存在的选择器的布局。用来实现的好处就是可以尽量大的把组件功能和业务逻辑分离开来，真正做一个组件该做的事，希望越来越好我们今天用css来实现一个常见的tab切换效果查看原文可以有更好的排版效果哦先看效果 https://codepen.io/xboxyan/pe... 前言哪些简单的效果可以考虑用css来实现呢，目前...

hizengzeng 2019-08-30 15:54 评论0 收藏0
FE.CSS-Sultana后记：纯css也能写col,select,datepicker,caro

摘要：接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中，可以用变量解决，比如实现了宽度，高度圆点大小直径的控件。未完待续背景如今css3越来越发达，focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底，一点点ps技能，你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践，我发现自定义原生控件并不是什么难事，...

BigTomato 2019-08-29 15:17 评论0 收藏0
FE.CSS-Sultana后记：纯css也能写col,select,datepicker,caro

摘要：接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中，可以用变量解决，比如实现了宽度，高度圆点大小直径的控件。未完待续背景如今css3越来越发达，focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底，一点点ps技能，你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践，我发现自定义原生控件并不是什么难事，...

lanffy 2019-08-26 17:29 评论0 收藏0
FE.CSS-Sultana后记：纯css也能写col,select,datepicker,caro

摘要：接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中，可以用变量解决，比如实现了宽度，高度圆点大小直径的控件。未完待续背景如今css3越来越发达，focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底，一点点ps技能，你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践，我发现自定义原生控件并不是什么难事，...

张金宝 2019-08-02 10:22 评论0 收藏0