武林網(wǎng)(www.survivalescaperooms.com)文章簡介：純CSS打造可折疊樹狀菜單。

隨著CSS3的發(fā)布，國外研究正如火如荼，但在國內(nèi)還有很多人抱著IE不支持CSS3的想法，始終無動于衷不肯去學習。但是歷史告訴我們，好的東西必將盛行，CSS3也終將也會替代CSS2，下面就和大家分享一個用CSS3打造的可折疊樹狀菜單。

直接上圖:

樹狀菜單相信大家都不會陌生，我們一般用css+JS 的方式來實現(xiàn)。而css3的到來，讓我們擺脫JS的束縛，直接運用CSS3的“選擇器“就能實現(xiàn)可折疊樹狀菜單。

整體的代碼很多，就不逐句逐句講了，只把我覺得重要的地方提出來說說吧。

Html代碼：

下級typeolalabel 下級typeolaaaaaalili>

實現(xiàn)的思路是運用checkbox的checked值來判斷下級欄目是否展開，CSS3的選擇器中提供了:checked 這個偽類，這個偽類提供我們，當元素擁有checked這個值的時候就執(zhí)行你的CSS。（很強大是吧。有了CSS3我們會少寫很多JS哦！）

下級type

當checkbox的擁有checked值的時候就就讓OL現(xiàn)實出來，達到我們想要的功能。

接下來看看CSS代碼吧：

li input leftmargin-opacityz-indexcursorheightwidthtopinput input overflowmargin-!importantli label displaypadding-backgroundinputmarginpaddingheightdisplayinput

這段代碼是樹狀菜單的中心：

inputmarginpaddingheightdisplay

這個是講當inoput 擁有了checked后它平級的OL擁有的樣式。

查看DEMO

使用IE9以下瀏覽就不用看了，請使用非IE瀏覽器。

（想讓IE6+瀏覽器支持也是可以滴，但是需要加JS來模擬css3屬性。國外有很多牛人都寫了讓IE6+瀏覽器支持部分CSS3的JS，例如PIE）

總結(jié)：

總體來說，實現(xiàn)思路很簡單，主要是利用CSS3的 checked 偽類來實現(xiàn)OL的隱藏顯示。不過遺憾的是IE游覽器不支持CSS3，但我們不能因為IE的不支持而放棄對CSS3的研究。在國外CSS3和HTML5都是前端很熱門的話題，他們研究的東西遠遠超過我們，但國內(nèi)真正去嘗試的還是不多，對于一個前端開發(fā)人員來說是一件很可悲的事。我認為CSS3應該引起我們的重視，不能讓我們輸在起跑線。讓我們大家一起來推動CSS3的發(fā)展吧。