css3 checked属性写导航目录

今天要教一个导航目录
由于其实通常导航会有二级目录，二级目录的展开或者隐藏须要用到鼠标点击事件的监听，因此通常咱们会用js写，今天，要教彻底用css3 的某个属性写一个能够隐藏二级目录的方法。先上效果图

<ul class="admin-sidebar-list">
            <li><input type="checkbox" checked="checked" />
                <a>目录一</a>
                <ul>
                    <li><a>子目录一</a></li>
                    <li><a>子目录二</a></li>
                </ul>
            </li>
            <li><input type="checkbox" />
                <a>目录二</a>
                <ul>
                    <li><a>子目录三</a></li>
                    <li><a>子目录四</a></li>
                </ul>
            </li>
        </ul>

从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）三克油思密达～