Home » CSS 應用

[CSS]賀聯式選單

[ 日期： | 瀏覽：15,084 | 迴響：3 ]

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

先直接來看效果是怎樣：

CSS 賀聯式選單-1

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

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

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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

使用 UL 及 LI 來做選單的項目，每一個 LI 中的 A 連結是我們主要的選單內容，而其 DIV 是更進階的描述內容，若不需要的話則可以不用加。因為我要讓每個選單都有不同的背景圖，所以還需要幫 A 連結都加一個獨立的 class。

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

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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

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

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

CSS 賀聯式選單-2

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

CSS 賀聯式選單-3

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

範例瀏覽：
http://demonstration.abgne.tw/css/0005/0005.html

3 筆針對 [CSS]賀聯式選單 的迴響

  1. 請問我想做到像01那樣的下拉頁籤
    你這種點一下只會多出底下那一塊
    有辦法在底下多出一排
    然後放上n個link點嗎?
    謝謝

  2. 請問如果我每一頁預設要讓其中一個選單是展開的該怎麼做呢？
    例如在「格言」那一頁的"格"是展開的
    而在「Q&A」那一頁"題"是展開的

發表迴響