成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

dabai / 1055人閱讀

摘要：今天要教一個(gè)導(dǎo)航目錄因?yàn)槠鋵?shí)一般導(dǎo)航會(huì)有二級(jí)目錄，二級(jí)目錄的展開(kāi)或者隱藏需要用到鼠標(biāo)點(diǎn)擊事件的監(jiān)聽(tīng)，所以一般我們會(huì)用寫(xiě)，今天，要教完全用的某個(gè)屬性寫(xiě)一個(gè)可以隱藏二級(jí)目錄的方法。

今天要教一個(gè)導(dǎo)航目錄
因?yàn)槠鋵?shí)一般導(dǎo)航會(huì)有二級(jí)目錄，二級(jí)目錄的展開(kāi)或者隱藏需要用到鼠標(biāo)點(diǎn)擊事件的監(jiān)聽(tīng)，所以一般我們會(huì)用js寫(xiě)，今天，要教完全用css3 的某個(gè)屬性寫(xiě)一個(gè)可以隱藏二級(jí)目錄的方法。先上效果圖

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

上面的幾個(gè)屬性你們懂么？嗯，不懂自己查啊，簡(jiǎn)單的。
然后要給input 寫(xiě)上checked屬性

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

可以給隱藏顯示寫(xiě)一個(gè)動(dòng)畫(huà) 也可以不寫(xiě)
寫(xiě)的話(huà)可以這樣寫(xiě)，不過(guò)得是谷歌內(nèi)核的瀏覽器

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

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

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

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

關(guān)注個(gè)人訂閱號(hào) ：有一個(gè)姑娘（int_sun）三克油思密達(dá)～

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111367.html

相關(guān)文章

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

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

    hizengzeng 評(píng)論0 收藏0

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

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

    BigTomato 評(píng)論0 收藏0

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

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

    lanffy 評(píng)論0 收藏0

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

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

    張金寶 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<