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

十二生肖码报资料大全:

码报开奖结果本期 www.iwqgw.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

分享到: 更多
重庆时时规律破解器 欢乐二人斗地主新版 前三组选包胆怎么玩 福彩3d组选三复式 快三人工计划三期必中全开 dnf 幸运飞船免费计划6码 福彩3d直选技巧 好运来计划软件app 高频彩免费计划软件下载 冠亚和值计划软件 pt电子游戏系统 欢乐生肖规则 大乐透胆拖兑奖表 大乐透规则 篮球最后3分钟投注