Home » CSS3 應用

[CSS3]用 CSS3 做選單 - 翻選式選單

[ 日期： | 瀏覽：17,729 | 迴響：1 ]
範例 1
範例 2
範例 3
請協助我把這個效果加到我的網站 (只要 1,000 元)
沒錯!只要 1,000 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

之前筆者有寫過一篇用 jQuery 做選單 – 翻選式選單的範例文章，該篇中除了使用到 jQuery 之外，還額外搭配另一個用來擴充動畫的外掛套件。但其實像這樣簡單的動態效果，只要使用 CSS3 的 transition 就能立即完成原本還要透過程式來達成的效果了。

我們 HTML 一樣不變：

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

<body>
	<h3>水平選單(圖片是垂直)</h3>
	<ul id="abgne-menu-20140102-1">
		<li><a href="#" class="v1">男丁</a></li>
		<li><a href="#" class="v2">jQuery</a></li>
		<li><a href="#" class="v3">小神童</a></li>
		<li><a href="#" class="v4">蠟筆小新</a></li>
	</ul>
 
	<br class="clear" />
</body>

而 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

#abgne-menu-20140102-1 {
	margin: 0;
	padding: 0;
	list-style: none;
}
#abgne-menu-20140102-1 li {
	float: left;
	padding: 0 5px;
}
#abgne-menu-20140102-1 li a {
	display: block;
	height: 16px;
	line-height: 16px;
	text-indent: -9999px;
}
#abgne-menu-20140102-1 a.v1 {
	width:68px; /* 圖片的寬 */
	background:url(v1.gif) no-repeat 0 0;	
}
#abgne-menu-20140102-1 a.v2 {
	width:67px; /* 圖片的寬 */
	background:url(v2.gif) no-repeat 0 0;	
}	
#abgne-menu-20140102-1 a.v3 {
	width:67px; /* 圖片的寬 */
	background:url(v3.gif) no-repeat 0 0;	
}
#abgne-menu-20140102-1 a.v4 {
	width: 67px; /* 圖片的寬 */
	background:url(v4.gif) no-repeat 0 0;	
}

我們一樣是上下兩層分開的的背景圖片：

v2

本來在用 jQuery 做選單 – 翻選式選單中是透過 jQuery 來達到移動 background-position 來進行動畫。現在則改用 CSS3 專有的 transition 語法來產生補間動畫效果。

檢視原始碼 CSS
1
2
3
4
5

/* 加上 transition */
#abgne-menu-20140102-1 li a {
	transition-property: background-position;
	transition-duration: 0.2s;
}

transition 是用來描述當指定屬性值改變時，是要立即的改變呢，還是像 Flash 一樣有補間動畫效果。transition-property 是用來指定屬性的；而 transition-duration 則是用來指定動畫執行的時間。

只要設定好 transition-property 之後，接下來當該屬性值改變時，就會有補間動畫出來了，所以我們只要在 :hover 時進行改變就可以了：

檢視原始碼 CSS
1
2
3

#abgne-menu-20140102-1 li a:hover {
	background-position: 0 -16px;
}

是不是比用程式來控制的方式更簡單呢！
css3-menu-flipping-0

而我們的 transition 語法也可以縮寫成：

檢視原始碼 CSS
1

transition: 屬性 時間;

所以就變成了

檢視原始碼 CSS
1
2
3
4

/* 加上 transition */
#abgne-menu-20140102-1 li a {
	transition: background-position 0.2s;
}

不過因為 CSS3 並未正式定案，各家瀏覽器廠商的支援語法不一，所以在使用時得加上各家廠商專有的前綴(vendor prefix)：

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

/* 加上 transition */
#abgne-menu-20140102-1 li a {
	-webkit-transition: background-position 0.2s;	/* Safari & Chrome */
	-moz-transition: background-position 0.2s;	/* Firefox */
	-ms-transition: background-position 0.2s;	/* IE */
	-o-transition: background-position 0.2s;	/* Opera */
	transition: background-position 0.2s;
}

請注意，要將標準的語法放最後才比較保險喔！

See the Pen [CSS3]用 CSS3 做選單 - 翻選式選單 by abgne.tw (@abgne-tw) on CodePen

那接下來水平移動的範例就讓各位同學自行練習啦！至於原本範例中的第五個可以固定點擊選單的作法，可以參考在用 CSS3 做表單 - 自訂單/多選框樣式(一)中所使用到的技巧！

範例 1 範例 2 範例 3 範例 4

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定
可固定版 會員限定

1 筆針對 [CSS3]用 CSS3 做選單 - 翻選式選單 的迴響

  1. 請問我的CSS設定為如下,但v6~v9的圖卻顯示不出來,能否提供解答呢? 謝謝!
    #abgne-menu a.v1 {
    width:180px; /* 圖片的寬 */
    background:url(img/v1.gif) no-repeat 0 0;
    }
    #abgne-menu a.v2 {
    width:125px; /* 圖片的寬 */
    background:url(img/v2.gif) no-repeat 0 0;
    }
    #abgne-menu a.v3 {
    width:125px; /* 圖片的寬 */
    background:url(img/v3.gif) no-repeat 0 0;
    }
    #abgne-menu a.v4 {
    width: 125px; /* 圖片的寬 */
    background:url(img/v4.gif) no-repeat 0 0;
    }
    #abgne-menu a.v5 {
    width: 125px; /* 圖片的寬 */
    background:url(img/v5.gif) no-repeat 0 0;
    }
    #abgne-menu a.v6 {
    width: 85px; /* 圖片的寬 */
    background:url(img/v6.gif) no-repeat 0 0;
    }
    #abgne-menu a.v7 {
    width: 85px; /* 圖片的寬 */
    background:url(img/v7.gif) no-repeat 0 0;
    }
    #abgne-menu a.v8 {
    width: 85px; /* 圖片的寬 */
    background:url(img/v8.gif) no-repeat 0 0;
    }
    #abgne-menu a.v9 {
    width: 85px; /* 圖片的寬 */
    background:url(img/v9.gif) no-repeat 0 0;
    }

發表迴響