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);
}

到這邊就整個都完成了，一開始瀏覽時就只有一排的選單

當滑鼠移到選項後就會顯示完整的背景內容

且我們的選單一樣是有超連結的功能，是不是很有趣呢！如果要讓效果更優的話，當然還是需要 JavaScript 的配合才行唷！

範例瀏覽：http://abgne.myweb.hinet.net/CSS/0005/0005.html

範例下載：http://www.flycan.com/example/abgne-css-menu.zip

by

男丁格爾

老師

當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！

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

by

男丁格爾

老師

關於「姜智豪老師」

熱門的文章

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

by

男丁格爾

老師

關於「姜智豪 老師」

熱門的文章

關於「姜智豪老師」