♥單純是種快樂♥

本文引用自此 【卜維丰】HTML / CSS / JavaScript - Javascript 滑動目錄 SlideMenu 日前正在製作滑動的menu選單， 參考了這篇文章，並且下載了範例回來做研究， 但是css部分，沒有太多註解，所以花了一點點時間研究一下， 在此提供有註解的css，讓不是很熟悉的開發者方便修改。 也是為以後的自己做筆記， :P 以下以horizon_menu（水平選單）為例， 標註上我有做更動、修改的說明。 在這邊提供我修改過的css檔案。（內含其他註解） 1）所有項目垂直置中 #horizon_menu *{ vertical-align:middle;} 我想要在主選單字樣前面加上圖示，如下： 但是沒有垂直置中的話，圖片跟文字有種不對齊的感覺， 加上#horizon_menu *{ vertical-align:middle;}變可改善情況。 2）選單背景圖示 原本的範例是使用灰色漸層圖片做背景， 我改為綠色漸層圖片做背景。 在 #horizon_menu span 裡面修改 background:url(bg3.png); 3）移除子選單左邊黑色粗邊 原本範例在子選單的左邊有一個黑色底的粗邊， 如果要移除的話， 在 #horizon_menu ul.collapsed li,#horizon_menu ul.expand li 中將 padding:0px 0px 0px 16px; 改為 padding:0px 0px 0px 0px; 4）子選單加框 拿掉左邊粗邊之後，我想在子選單的上下左右加個線框，像下圖這樣。 在#horizon_menu ul.expand中加上border-top:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; border-bottom:1px solid gray; 5）子選單的選項下方加底線 在#horizon_menu ul.expand li中加上border-top:1px solid #DDDDDD; 就會如下圖： 大概有做修改的就如上面幾點， 其他背景顏色、字體顏色、字體大小之類比較基本的設定我就不多做說明了。