css3 checked屬性寫導航目錄

dabai 發布于2019-08-29 11:01 / 1034人閱讀

摘要：今天要教一個導航目錄因為其實一般導航會有二級目錄，二級目錄的展開或者隱藏需要用到鼠標點擊事件的監聽，所以一般我們會用寫，今天，要教完全用的某個屬性寫一個可以隱藏二級目錄的方法。

今天要教一個導航目錄
因為其實一般導航會有二級目錄，二級目錄的展開或者隱藏需要用到鼠標點擊事件的監聽，所以一般我們會用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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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