css怎么實現動態導航欄

本篇內容介紹了“css怎么實現動態導航欄 ”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

結果：

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

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

CSS Code復制內容到剪貼板

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

CSS Code復制內容到剪貼板

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選擇器：

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

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

“css怎么實現動態導航欄 ”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！