Home » CSS 應用

[CSS]彈起式頁籤選單

[ 日期： | 瀏覽：18,604 | 迴響：6 ]

嗯~繼上一次莫名其妙的「賀聯式選單」之後，現在又多了一個"彈起式頁籤選單"！？當然我一樣不知道這樣的效果要取什麼名稱比較好，如果各位有想到更貼切的名稱時，麻煩留言告知一下。

一樣先直接來看效果是怎樣：

css_menu_2_1

跟「賀聯式選單」不同的是在此次是滑鼠移到選單後會往上升，就像是突然彈起來一樣。

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

檢視原始碼 HTML
1
2
3
4
5
6
7
8

<body>
	<ul id="menu">
		<li><a href="#" class="home">首頁</a></li>
		<li><a href="#" class="car">購物車</a></li>
		<li><a href="#" class="good">推薦商品</a></li>
		<li><a href="#" class="query">訂單查詢</a></li>
	</ul>
</body>

同樣是用 UL 及 LI 來做選單的項目，每一個 LI 中的 A 連結是我們主要的選單內容，且為了讓每個選單都有不同的選單圖片，所以還幫 A 連結都加一個獨立的 class。

接著開始動手寫 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

#menu {
	margin: 20px 0 0;
	padding: 0;
	height: 62px;		/* 選單圖片的高 */
	list-style: none;
	overflow: hidden;
	width: 432px;		/* 98 * 4 + 5 * 8 */
	border-bottom: 1px solid #ccc;
}
#menu li {
	float: left;
	padding: 0 5px;
}
#menu li a {
	display: block;
	width: 98px;		/* 選單圖片的寬 */
	height: 62px;		/* 選單圖片的高 */
	line-height: 62px;	/* ie suck */
	text-indent: -9999px;
	margin-top: 31px;	/* 需要設定為圖片寬/2 */
	background-repeat: no-repeat;
}
#menu li a:hover {
	margin-top: 1px;	/* 當滑鼠移到選單上時... */
}
/* 幫每一個 A 連結都加入不同選單圖片 */
.home {background:url(home.gif);}
.car {background:url(car.gif);}
.good {background:url(good.gif);}
.query {background:url(query.gif);}

這邊要注意的是 A 連結的 margin-top 是選單圖片高的一半 - 31px，所以超過的部份就不會顯示出來；另外，當滑鼠移到 A 連結後，再額外訂了一個 a:hover { } 來減少它的 margin-top，因此原本看不到的背景部份就會顯現出來了。

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

css_menu_2_2

當滑鼠移到選項後就會彈起來囉~~

css_menu_2_3

我們的選單一樣是有超連結的功能，也可以把它當成一般頁籤加以運用！如果要讓效果更有彈起的感覺時，就需要 JavaScript 的配合才行唷！

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

6 筆針對 [CSS]彈起式頁籤選單 的迴響

  1. 因為做專題而接觸了css和jquery
    慢慢也對這塊領域感興趣
    不過之前都是改別人範例
    現在想認真學
    不知站長能否推薦相關書籍

發表迴響