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


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


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


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


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


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


CSS：


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


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


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

最新評論