在線演示 源碼下載7純CSS3立體動畫菜單 菜單項按下有內(nèi)陰影這次小編來分享一款利用純CSS3實現(xiàn)的立體動畫菜單，該菜單的實現(xiàn)非常簡單，并沒有太多的特效渲染，但是看起來卻非常干凈漂亮，尤其配合灰黑色的背景，讓菜單顯得有點。

mainMenu backgroundcolorFFF*Backgroundcolorofmainmenu* fontfamilyTrebuchetMS，LucidaSansUnicode，Arial，sansserif*Fontsofmainmenuitems* fontsize12em*Fontsizeofmainmenuitems* borderbottom1pxso。

在function內(nèi)部實現(xiàn)鼠標進入事件，以及所有下拉效果的實現(xiàn)停止播放所有的特效動畫，隱藏子菜單圖為js代碼獲取子集菜單，重新設置菜單位置圖為html代碼停掉子集菜單動作并觸發(fā)下拉圖為css代碼主菜單的鼠標移出動作。

它的位置是固定的，所以菜單一直在同一個地方滾動高度設為100%注意，左邊距設置為負數(shù)，使這菜單從視圖中消失為了讓它有一個出現(xiàn)的特效，我們用jquery來了調(diào)用另一class來顯示和關閉JavaScript代碼如下$documentreadyfunction。