Home » CSS 應用

[CSS]滑入式訊息選單

[ 日期： | 瀏覽：17,393 | 迴響：2 ]

CSS 在網頁中佔有很重的地位，有些原本用 JavaScript 產生的效果都能單純使用 CSS 來做到，像是圖片按鈕的變換...等等的。現在要介紹的滑入式訊息選單就是使用 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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<body>
	<ul id="gallery">
		<li>
			<a href="http://www.flycan.com.tw/course/jquery.php">
				<h3>jQuery 互動網頁程式應用班</h3>
				<span>jQuery 是一個快速又簡潔的 JavaScript 程式庫，除了簡化 HTML 屬性的存取使用、事件的監聽處理及 Ajax 之外，也解決了大部份瀏覽器間的相容性問題。同時也加入一些不輸給 Flash 的基礎動畫效果，使得我們的網頁不再是死板的回應使用者的動作。透過 jQuery 的程式特性 <b>...繼續閱讀</b></span>
			</a>
		</li>
		<li>
			<a href="http://www.flycan.com.tw/course/wordpress.php">
				<h3>WordPress 部落格架設與管理</h3>
				<span>WordPress是目前被廣泛的拿來架設個人的部落格平台，隨著Web2.0的時代來臨，以及Blog的誕生，徹底的改變了網路生態與使用者的習慣，為什麼WordPress能在短短的幾年間火速篡升，主要的原因就在於，資源多且好搜尋、穩定度高、好操作，還有另一個重點，就是即便完全不懂PHP也可輕鬆的架設起一個屬於自已的部落格 <b>...了解更多</b></span>
			</a>
		</li>
		<li>
			<a href="http://www.flycan.com.tw/course/course_dwphp.php">
				<h3>Dreamweaver PHP 資料庫網頁班</h3>
				<span>為完全沒有 PHP 程式語言基礎的網頁設計師和美術設計師量身打造的 PHP 資料庫網頁課程！從基礎的資料庫網頁觀念開始學習，透過視覺化的工具，開發出各種實用的資料庫網頁系統，在課堂上紮紮實實製作出數個完整的網站應用程式，例如留言版、新聞公告系統、討論區、會員登錄系統 <b>...Read More</b></span>
			</a>
		</li>
		<li>
			<a href="http://www.flycan.com.tw/course/course_css.php">
				<h3>CSS 語法 - div 版面設計專修班</h3>
				<span>徹底改變您對網頁設計的觀念！所有網頁設計師必修的新學分！ CSS ＆ XHTML 是由 W3C 所定訂的全新一代的網頁設計的新標準，透過結構化的 XHTML 使網頁語法變得非常簡潔，更容易讀取，更容易維護，您會十分訝異網頁語法居然可以變得如此的乾淨！ <b>...Read More</b></span>
			</a>
		</li>
		<li>
			<a href="http://www.flycan.com.tw/course/course_photopro.php">
				<h3>Photoshop 影像達人專修班</h3>
				<span>Photoshop 是目前設計界最重要的軟體，想學習職業等級的影像處理技巧以及影像合成技巧嗎！您不能錯過本課程喔！全課程包含大量不同的修圖範例、去背範例、特效範例、合成範例、商業設計範例、網頁設計範例、攝影後製範例！上課實際操作每一個範例~現場練習 <b>...Read More</b></span>
			</a>
		</li>
		<li>
			<a href="http://www.flycan.com.tw/course/illustrator_basic.php">
				<h3>illustrator 平面設計入門班</h3>
				<span>illustrator 是目前平面設計界最重要的軟體，本課程有基本圖像繪製範例、印刷排版範例、名片設計範例、酷卡範例、DM排版範例、商業設計範例！上課實際操作每一個範例~現場練習~本課程將從最基本的影像處理觀念，和基本工具操作講起，課程內將有大量的範例讓您實際操作，因此沒有學過 illustrator 的也可以參加喔！ <b>...Read More</b></span>
			</a>
		</li>
		<li>
			<a href="http://www.flycan.com.tw/course/course_flashpv3d.php">
				<h3>FLASH AS3.0 ＆ PV3D 進階整合應用班</h3>
				<span>從 ActionScript 3.0 全新核心引擎架構觀念開始講解，一步一步讓同學了解 ActionScript 3.0 物件導向程式設計的強大的功能，本班的另一個重點在介紹Papervision3D(簡稱PV3D)， PV3D是一套開放式的3D類別，製作出更多更炫的FLASH 3D應用，淺而易懂的方式解說，搭配大量的範例實作，讓同學得到最札實的養成訓練 <b>...Read More</b></span>
			</a>
		</li>
		<li>
			<a href="http://www.flycan.com.tw/course/course_flashaction1.php">
				<h3>Flash ActionScript 2.0 程式養成班</h3>
				<span>本課程是Flash ActionScript 2.0 程式設計的專修課程，從最基礎的程式語法開始，一個一個講解必備的常用指令的使用方法，並同時分析程式語法的結講，課堂上會要求同學親手撰寫每一段程式，一步一步培養撰寫程式的習慣、讓完全沒有程式基礎的您得到最札實的程式養成訓練 <b>...Read More</b></span>
			</a>
		</li>
	</ul>
</body>

我們使用 UL 及 LI 來當資料排列，每一筆 LI 都是一筆訊息內容，真正的訊息是超連結 A 所包覆的內容。而訊息內容中用 H3 來當主要的標題，其它內容則是放在 SPAN 裡面，如果訊息內容太長時，順便用放個類似 Read More... 的訊息來讓瀏覽者能點下連結。

在套上 CSS 之前先看一下原始的畫面：

CSS 滑入式訊息選單-1

接下來就直接套上最重要的 CSS Code：

檢視原始碼 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

#gallery {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	width: 278px;
	height: 370px; /* 7 * 30 + 160 - 10 */
	border: 4px solid #fc0;
	background-color: #ff6;
	font: 12px Arial, Helvetica, sans-serif;
}
 
#gallery li a {
	display: block;
	overflow: hidden;
	padding-left: 10px;
	height: 30px;
	width: 268px;
	text-decoration: none;
	color: #600;
}
 
#gallery li a:hover {
	background-color: #fc0;
	height: 160px;
	color: #000;
}
 
#gallery h3 {
	text-transform: uppercase;
	font: 13px "Arial Black", Arial, Helvetica, sans-serif;
	font-weight: 600;
	letter-spacing: -1px;
}
 
#gallery b {
	color: #600;
}

這邊比較特別要注意的部份是 UL#gallery 的高度設定，為了讓整個效果貼一點，所以它的高要配合子元素 LI 的高再加上當展開訊息時的高，所以，目前 UL#gallery 有 8 個 LI，所以當有一個展開時高會是 160px，而其它 7 個 LI 的高就是 7 * 30px，最後那個 - 10px 只是要讓最下方的 LI 能貼到 UL#gallery 的底邊，就算不減也不會影響。如果 UL#gallery 的高度要自訂也是沒關係的。

套完之後就來看效果如何囉！

CSS 滑入式訊息選單-2

看來「佛要金裝，人要衣裝」之外，網頁也要有 CSS 裝才行，單純只加上 CSS 後的樣子就差很多了。接著再把滑鼠移到上面的標題看看反應：

CSS 滑入式訊息選單-3

哇~有沒有發現移到標題後就會展開下面的訊息內容呢？！且每一個標題都是有超連結的效果的，點下去後會連到指定的頁面哩。原本可能要依賴 JavaScript 的效果就簡簡單單的靠 CSS 就有了，是不是很有趣呢！

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

2 筆針對 [CSS]滑入式訊息選單 的迴響

發表迴響