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