css怎么實(shí)現(xiàn)動態(tài)導(dǎo)航欄

本篇內(nèi)容介紹了“css怎么實(shí)現(xiàn)動態(tài)導(dǎo)航欄 ”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

方案：使用checkbox 的 checked 屬性、巧妙地制作導(dǎo)航欄

結(jié)果：

我們主要制作成這樣這樣的的導(dǎo)航欄：

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. <div class="nav-child">   

2.      <input type="checkbox" id="nav01"/>   

3.          <label for="nav01">             <svg>圖標(biāo)</svg>   

4.               交通出行   

5.               <span class="choice-box">　　　　　　　　　　　　<svg>圖標(biāo)</svg>   

6.               </span>   

7.          </label>   

8.           <div class="nav-item">   

9.                <ul>   

10.                   <li>動車</li>   

11.                   <li>違章</li>   

12.                   <li>機(jī)票</li>   

13.                   </ul>   

14.           </div>   

15. </div>   

接下來我選用 less

CSS Code復(fù)制內(nèi)容到剪貼板

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 就大功告成啦?。。?/p>

說明：

css3選擇器：

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

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

“css怎么實(shí)現(xiàn)動態(tài)導(dǎo)航欄 ”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！