成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

css3 checked屬性寫導(dǎo)航目錄

dabai / 1094人閱讀

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

今天要教一個導(dǎo)航目錄
因為其實一般導(dǎo)航會有二級目錄，二級目錄的展開或者隱藏需要用到鼠標(biāo)點擊事件的監(jiān)聽，所以一般我們會用js寫，今天，要教完全用css3 的某個屬性寫一個可以隱藏二級目錄的方法。先上效果圖

從html代碼來看，是不是很簡單。
需要用到的屬性就是 css3 的 input :checked
里面ul 和li 的css就不說了
首先需要把input隱藏并且覆蓋整個li，不然無法觸發(fā)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; 
}

可以給隱藏顯示寫一個動畫 也可以不寫
寫的話可以這樣寫，不過得是谷歌內(nèi)核的瀏覽器

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

余下的就是用我們常見的:hover 鼠標(biāo)懸停變換顏色

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

跟著姐姐學(xué)前端，月薪上萬不是夢呢。不過首先你得先關(guān)注我，并轉(zhuǎn)發(fā)呢，這樣我們的友誼才能天長地久。
說正經(jīng)的，如果我們還在寫html css js或者是jQuery這種三合一的又大又長的項目，css能做到的就不要用js寫了，好么 ～

關(guān)注個人訂閱號 ：有一個姑娘（int_sun）三克油思密達～

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/111367.html

相關(guān)文章

  • 用純css實現(xiàn)Tab切換

    摘要：所以當(dāng)我們思考能否用來實現(xiàn)時還應(yīng)考慮到的結(jié)構(gòu)，能不能構(gòu)造出滿足已存在的選擇器的布局。用來實現(xiàn)的好處就是可以盡量大的把組件功能和業(yè)務(wù)邏輯分離開來，真正做一個組件該做的事，希望越來越好 我們今天用css來實現(xiàn)一個常見的tab切換效果 查看原文可以有更好的排版效果哦 先看效果 https://codepen.io/xboxyan/pe... 前言 哪些簡單的效果可以考慮用css來實現(xiàn)呢，目前...

    hizengzeng 評論0 收藏0

  • FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

    摘要：接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點功能中，可以用變量解決，比如實現(xiàn)了寬度，高度圓點大小直徑的控件。 未完待續(xù) 背景 如今css3越來越發(fā)達，focus-within等屬性也已經(jīng)開始在Chrome得到支持。如果有出色的css功底，一點點ps技能，你也能用css3配合原生html標(biāo)簽寫出優(yōu)秀的框架。通過對css3的實踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...

    BigTomato 評論0 收藏0

  • FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

    摘要：接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點功能中，可以用變量解決，比如實現(xiàn)了寬度，高度圓點大小直徑的控件。 未完待續(xù) 背景 如今css3越來越發(fā)達，focus-within等屬性也已經(jīng)開始在Chrome得到支持。如果有出色的css功底，一點點ps技能，你也能用css3配合原生html標(biāo)簽寫出優(yōu)秀的框架。通過對css3的實踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...

    lanffy 評論0 收藏0

  • FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

    摘要：接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點功能中，可以用變量解決，比如實現(xiàn)了寬度，高度圓點大小直徑的控件。 未完待續(xù) 背景 如今css3越來越發(fā)達，focus-within等屬性也已經(jīng)開始在Chrome得到支持。如果有出色的css功底，一點點ps技能，你也能用css3配合原生html標(biāo)簽寫出優(yōu)秀的框架。通過對css3的實踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...

    張金寶 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<