CSS選單技巧

Rachel Cunliffe在今天的CSS… and rollover tabs裡面，提到一個她從Dan Cederholm的書中學到的CSS選單技巧，我覺得很實用，值得和大家分享。

這個技巧是描述如何只利用一張圖片，作出會隨著滑鼠游標變換的標籤選單（rollover tabs）。

所謂的標籤選單是甚麼呢？請看下面的範例：

上面的選單底圖平時為A圖，當滑鼠游標經過時則會變換為B圖。一般常見的作法是將A圖與B圖分別儲存為兩個檔案，再利用:hover這個擬態類別製作出變換圖片的效果。

而Rachel介紹的這個技巧，實際上還是會用到兩張圖片，只不過將兩張圖片放在同一個檔案中，所以也可說是一張圖片。範例中的選單底圖，其實是這樣：

建議各位採用無序清單<ul>來製作選單，本範例的HTML原始碼如下：

<div id="mainmenu"><ul><li><a href="#">這個是選項A</a></li><li><a href="#">這個是選項B</a></li></ul></div>

再搭配下面這段CSS，就能做出漂亮的選單了：

#mainmenu ul {margin:0; padding:20px; list-style:none;}
#mainmenu li {display:inline; margin:0; padding:0;}
#mainmenu li a { background: url(圖片網址) no-repeat top left; padding:13px 13px 0 13px; }
#mainmenu li a:hover { background: url(圖片網址) no-repeat bottom left; padding:13px 13px 4px 13px; }

延伸學習：Free CSS Navigation Menu Designs

可能的相關文章：

• CSS技巧：在網頁中標示外部連結
• 標示檔案連結類型的javascript
• CSS技巧：使用兩張圖片作為網頁背景
• 你是哪個等級的CSS開發人員？

這篇文章發表於 January 21st, 2006 ，分類為：Webdev。你可以訂閱這篇文章的回應：RSS 2.0，也歡迎發表你的意見，或者從你的網站 Trackback 過來。