CSS 在網頁中佔有很重的地位，有些原本用 JavaScript 產生的效果都能單純使用 CSS 來做到，像是圖片按鈕的變換…等等的。現在要介紹的滑入式訊息選單就是使用 CSS 來做出讓人眼睛為之一亮的效果。
首先來看 HTML 的部份：
使用 <ul> <li> 項目清單，裡面置入標題文字內容文字，還有全部用超連結包起來。
<ul id="gallery"> <li> <a href="http://www.flycan.com.tw/course/jquery.php"> <h3>jQuery 互動網頁程式應用班</h3> <span>jQuery 是一個快速又簡潔的 JavaScript 程式庫，除了簡化 HTML 屬性的存取使用、事件的監聽處理及 Ajax 之外，也解決了大部份瀏覽器間的相容性問題。同時也加入一些不輸給 Flash 的基礎動畫效果，使得我們的網頁不再是死板的回應使用者的動作。透過 jQuery 的程式特性 <strong>...繼續閱讀</strong> </span> </a> </li> </ul> |
我們使用 UL 及 LI 來當資料排列，每一筆 LI 都是一筆訊息內容，真正的訊息是超連結 A 所包覆的內容。而訊息內容中用 H3 來當主要的標題，其它內容則是放在 SPAN 裡面，如果訊息內容太長時，順便用放個類似 Read More… 的訊息來讓瀏覽者能點下連結。
以上的 <li> 項目清單 多做幾個，先看一下 HTML 網頁原始的畫面：
接下來就直接套上最重要的 CSS Code：
ul#gallery { margin: 0; padding: 0; list-style: none; width: 500px; height:450px; border: 4px solid #fc0; background-color: #ff6; font: 13px Arial, Helvetica, sans-serif; } ul#gallery li a { display: block; overflow: hidden; padding-left: 10px; line-height:30px; width: 492px; height: 30px; text-decoration: none; color: #600; } ul#gallery li a span{ color:#000;} ul#gallery li a:hover { background-color: #fc0; height: 170px; color: #F00; } ul#gallery h3 { text-transform: uppercase; font: 13px "Arial Black", Arial, Helvetica, sans-serif; } ul#gallery b { color: #600; } |
重點是第 17 行，設定超連結的高度為 30px ，第 13 行設定 overflow:hidden 多出來的文字就會被隱藏起來。然後，在第 24 行設定當滑鼠摸到的時候，高度變成 170px ，效果就出來了！
套用 CSS 語法之後就來看效果如何囉！
看來「佛要金裝，人要衣裝」之外，網頁也要有 CSS 裝才行，單純只加上 CSS 後的樣子就差很多了。接著再把滑鼠移到上面的標題看看反應：
哇~有沒有發現移到標題後就會展開下面的訊息內容呢？！且每一個標題都是有超連結的效果的，點下去後會連到指定的頁面哩。原本可能要依賴 JavaScript 的效果就簡簡單單的靠 CSS 就有了，是不是很簡嘽，很有趣呢！
範例瀏覽： http://www.flycan.com/example/abgne-css-menu-2/001.html
範例下載： http://www.flycan.com/example/abgne-css-menu-2/abgne-css-menu-2.zip
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！
