巧妙使用checkbox製做純css動態導航欄

前提：不少時候、咱們的網頁都須要一個垂直的導航欄、能夠分類、有分類、天然就有展開、關閉的功能、你還在使用jquery操做dom來製做嗎？那你就out了！

方案：使用checkbox 的 checked 屬性、巧妙地製做導航欄

結果：

咱們主要製做成這樣這樣的的導航欄：

首先、咱們寫出相對的html  因爲時間問題、svg沒有處理到類中、因此這裏給出svg的空標籤、你們若是想看效果、能夠到個人git裏面fork一份

<div class="nav-child">
     <input type="checkbox" id="nav01"/>
         <label for="nav01">
             <svg>圖標</svg>
              交通出行
              <span class="choice-box">
　　　　　　　　　　　　<svg>圖標</svg>
              </span>
         </label>
          <div class="nav-item">
               <ul>
                  <li>動車</li>
                  <li>違章</li>
                  <li>機票</li>
                  </ul>
          </div>
</div>

 

接下來我選用 less

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

編譯以後生成css 就大功告成啦！！！

 

說明：

css3選擇器：

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

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

有興趣的能夠看個人源碼 查看完整代碼~ 洗洗睡睡 敷面膜啦

轉載請註明出處 http://www.cnblogs.com/Miss-mickey/