巧妙使用checkbox制作純css動態導航欄程序媛_Mickey

奇人透码论坛资料:

香港彩票透码 www.kptln.icu 前提:很多時候、我們的網頁都需要一個垂直的導航欄、可以分類、有分類、自然就有展開、關閉的功能、你還在使用jquery操作dom來制作嗎?那你就out了!

方案:使用checkbox 的 checked 屬性、巧妙地制作導航欄

結果:

我們主要制作成這樣這樣的的導航欄:

HTML5培訓,前端培訓,web前端培訓

首先、我們寫出相對的html  由于時間問題、svg沒有處理到類中、所以這里給出svg的空標簽、大家如果想看效果、可以到我的一份

<label for="nav01">
           圖標交通出行              
            圖標

  • 動車

  • 違章

  • 機票

 

接下來我選用 less

.nav-child{
      input[type='checkbox']:checked{+label{
          .choice-box{
            svg{
              transform: rotate(-90deg);
              transition: all 0.3s;
            }
          }
        }~.nav-item{
          display: none;
        }
      }
    }

編譯之后生成css 就大功告成啦?。?!

 

說明:

css3選擇器:

+ 代表選擇元素緊鄰的元素

~ 代表選擇元素同級的元素

有興趣的可以看 ~ 洗洗睡睡 敷面膜啦


來源:程序媛_Mickey博客園

上一篇: 用H5+Boostrap做簡單的音樂播放器玉菲莎

下一篇: jQuery is DSL

分享到: 更多
ds足球官网 必中快三计划安卓版 福彩十分快三计划软件 北京pk赛车官网代理 快3三不同号投注技巧 3d直选1胆拖9多少钱 看牌抢庄斗牛赢现金 新时时分析软件 体育彩票不能电子投注 火爆通比牛牛手机版下载 时时彩赚钱秘籍 软件协议书范本 麻将怎么打 北京塞车pk10现场直播 25码投资方案 老时时彩走势图