今天分享一個(gè)如何使用純CSS3創(chuàng)建手風(fēng)琴風(fēng)格菜單教程，菜單主要通過(guò)使用:target偽類來(lái)實(shí)現(xiàn)。
:target使用介紹
CSS3 target偽類是眾多實(shí)用的CSS3特性中的一個(gè)。它用來(lái)匹配文檔(頁(yè)面)的URI中某個(gè)標(biāo)志符的目標(biāo)元素。具體來(lái)說(shuō)，URI中的標(biāo)志符通常會(huì)包含一 個(gè)”#”字符，然后后面帶有一個(gè)標(biāo)志符名稱，比如#respond，target就是用來(lái)匹配ID為respond的元素的。
現(xiàn)在在頁(yè)面中，點(diǎn)擊一個(gè)ID鏈接后，頁(yè)面只會(huì)跳轉(zhuǎn)到相應(yīng)的位置，但是并不會(huì)有比較明顯的UI標(biāo)識(shí)，使用:target偽類可以像:hover等偽類一樣對(duì)目標(biāo)元素定義樣式。
第一步：HTML標(biāo)簽結(jié)構(gòu)
一 個(gè)簡(jiǎn)單的無(wú)序列表，每個(gè)li中包含一個(gè)超鏈接和span，同時(shí)為每一個(gè)li添加一個(gè)不同的id和一個(gè)連接到這個(gè)id的超鏈接。為了添加樣式和展開(kāi)菜單項(xiàng)下 面的內(nèi)容，需要使用:target偽類。


第二步：菜單布局基本樣式
首先修改一些瀏覽器默認(rèn) 樣式，清除margin padding等等。


定義菜單項(xiàng)鏈接樣式，添加漸變，陰影的效果，定義字體等。這里沒(méi)有指定固定的寬度，菜單的 寬度100%填充它的父元素，如果你想把菜單設(shè)置成300px，你可以給它添加一個(gè)父div，指定寬度為300px就可以了。雖然沒(méi)有指定寬度，但是定義 了最小寬度，保證菜單布局能夠正確的顯示。


定義數(shù)字指示器樣式，當(dāng)然如果你的菜單不需要數(shù)字指示器，你打可以刪掉這個(gè)html結(jié)構(gòu)中 span元素。


第三步：添加圖標(biāo)樣式
我們使用:before為菜單插入圖標(biāo)，圖標(biāo)的寬 高都是24px，用下面的樣式使其正確的顯示。我創(chuàng)建了一個(gè)sprite，包含了四個(gè)圖標(biāo)的正常和hover時(shí)候的不同樣式。


第四步：子菜單HTML和樣式
HTML：
同 樣也使用ul作為子菜單，放到父菜單的li里面，如下代碼：


CSS：


第五步：定義鼠標(biāo)懸浮和菜單激活時(shí)狀態(tài)樣式
當(dāng)鼠標(biāo)懸浮和菜單激活時(shí)改變 背景為綠色。


第六步：控制子菜單的顯示與隱藏
為 了隱藏子菜單，我們需要定義子菜單的高度為0px。當(dāng)點(diǎn)擊父菜單時(shí)，為子菜單添加下滑顯示的動(dòng)態(tài)效果。為了實(shí)現(xiàn)下滑的效果，需要指定子菜單固定的高度。因 為這個(gè)教程中子菜單有三個(gè)link，所以這里指定了98px。如果你想加更多的子菜單就需要修改height為所有子菜單的高度和，當(dāng)然如果你想要讓它自 動(dòng)變化，可以給高度賦值100%，但是這樣下滑的動(dòng)畫(huà)效果就沒(méi)有了。


總結(jié)：
到此純CSS3實(shí)現(xiàn)的手風(fēng)琴風(fēng)格菜單就全部結(jié)束了。教程中我們主要通過(guò)使用偽類:before和:target來(lái)定義樣式，使用:target來(lái)實(shí)現(xiàn)菜單點(diǎn)擊展開(kāi)子菜單事件。希望你能夠喜歡這個(gè)教程。