語軒閣: CSS 語法教學 – 彈出式選單

2012年2月8日星期三

CSS 語法教學 – 彈出式選單 – 賀聯式選單

我想應該沒有人懂什麼是"賀聯式選單"吧！？其實我也不知道這樣的效果要取什麼名稱比較好，總不可能叫"男丁格爾選單"吧！！所以，如果各位有想到更貼切的名稱時，麻煩留言告知一下。

先直接來看效果是怎樣：

當滑鼠移到選單之後，下方會展開並有其它說明內容，我這邊是把展開的部份加上圖片內容，讓它有其它不同的變化。因為這樣的動作就像人家廟會時會有舞獅從嘴裡丟下賀聯一樣，所以我才取名為"賀聯式選單"。

這樣的效果其實只需要 HTML 及 CSS 配合就能做出來了，我們先來看 HTML 的部份：

<ul>
 <li><a class="t1" href="#">梅干桑</a><div><a class="t1" href="#">自我介紹</a></div></li>
 <li><a class="t2" href="#">Photoshop</a><div><a class="t2" href="#">上課囉!!</a></div></li>
 <li> <a class="t3" href="#">Q &amp; A</a><div><a class="t3" href="#">問題討論</a></div><a class="t3" href="#"> </a></li>
 <li> <a class="t4" href="#">男丁格爾</a></li>
 <li> <a class="t5" href="#">人材</a><div><a class="t5" href="#">丁丁是人材</a></div></li>
 <li> <a class="t6" href="#">格言</a><div><a class="t6" href="#">好話大家說</a></div><a class="t6" href="#"> </a> </li>
 <li> <a class="t7" href="http://www.wowgame.tw">WOWGame</a></li> 
</ul>

使用 UL 及 LI 來做選單的項目，每一個 LI 中的 A 連結是我們主要的選單內容，而其 DIV 是更進階的描述內容，若不需要的話則可以不用加。如下

<ul>
 <li> <a class="t1" href="#">梅干桑</a></li>
 <li> <a class="t2" href="#">Photoshop</a></li>
 <li> <a class="t3" href="#">Q &amp; A</a></li>
 <li> <a class="t4" href="#">男丁格爾</a></li>
 <li> <a class="t5" href="#">人材 </a></li>
 <li> <a class="t6" href="#">格言 </a></li>
 <li> <a class="t7" href="#">WOWGame</a></li> 
</ul>

因為我要讓每個選單都有不同的背景圖，所以還需要幫 A 連結都加一個獨立的 class。

然後，我有 7 個 LI 選單項目，因此我還請梅干幫忙準備了 7 張圖片(果然還是要專業的來)。接著就能開始動手寫 CSS 囉：

這邊用到的 CSS 語法都是很基礎的，比較需要注意的是我們一開始 A 連結的 height 是 50px，所以超過的部份會因為 overflow 為 hidden 的關係而被隱藏起來；另外，當滑鼠移到 A 連結後，再額外訂了一個 a:hover { } 來把它的 height 撐高，因此原本看不到的背景部份就會顯現出來了。

ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
ul li {
 float: left;
}
ul li a {
 width: 100px;
 height: 50px;
 display: block;
 line-height: 50px;
 overflow: hidden;
 text-align: center;
 text-decoration: none;
 color: #fff;
}
ul li a:hover {
 height: 150px;
}
ul li a div {
 color: #fff;
 line-height: 16px;
 font-weight: bold;
 margin-top: 73px;
 padding-top: 7px;
 border-top: 1px dotted #fff;
}
.t1 {
 background: #08f2d6 url(01.gif);
}
.t2 {
 background: #1209f1 url(02.gif);
}
.t3 {
 background: #a202e2 url(03.gif);
}
.t4 {
 background: #f4e603 url(04.gif);
}
.t5 {
 background: #55df07 url(05.gif);
}
.t6 {
 background: #02a8f3 url(06.gif);
}
.t7 {
 background: #f6025e url(07.gif);
}