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

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

先直接來看效果是怎樣:

CSS 語法 - 網頁設計  - CSS 語法教學 - 彈出式選單 - 賀聯式選單 - fly011

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

這樣的效果其實只需要 HTMLCSS 配合就能做出來了,我們先來看 HTML 的部份:

 

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

 

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

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

CSS 語法 - 網頁設計  - CSS 語法教學 - 彈出式選單 - 賀聯式選單 - fly031

這邊用到的 CSS 語法都是很基礎的,比較需要注意的是我們一開始 A 連結height50px,所以超過的部份會因為 overflowhidden 的關係而被隱藏起來;另外,當滑鼠移到 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);
}

 

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

CSS 語法 - 網頁設計  - CSS 語法教學 - 彈出式選單 - 賀聯式選單 - fly041

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

CSS 語法 - 網頁設計  - CSS 語法教學 - 彈出式選單 - 賀聯式選單 - fly012

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

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

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

by
男丁格爾
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , .

迴響已被關閉。