DIV CSS 佈局教程網

前提：很多時候、我們的網頁都需要一個垂直的導航欄、可以分類、有分類、自然就有展開、關閉的功能、你還在使用jquery操作dom來制作嗎？那你就out了！

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

結果：

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

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

1. <div class="nav-child">   
2.      <input type="checkbox" id="nav01"/>   
3.          <label for="nav01">             <svg>圖標</svg>   
4.               交通出行   
5.               <span class="choice-box">　　　　　　　　　　　　<svg>圖標</svg>   
6.               </span>   
7.          </label>   
8.           <div class="nav-item">   
9.                <ul>   
10.                   <li>動車</li>   
11.                   <li>違章</li>   
12.                   <li>機票</li>   
13.                   </ul>   
14.           </div>   
15. </div>   

接下來我選用 less

1. .nav-child{   
2.       input[type='checkbox']:checked{   
3.         +label{   
4.           .choice-box{   
5.             svg{   
6.               transform: rotate(-90deg);   
7.               transition: all 0.3s;   
8.             }   
9.           }   
10.         }   
11.         ~.nav-item{   
12.           display: none;   
13.         }   
14.       }   
15.     }   

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

說明：

css3選擇器：

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

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

以上所述是小編給大家介紹的使用CheckBox的屬性制作純css動態導航欄，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！