CSS 語法教學 – 隱藏式訊息區塊 – 簡易版

CSS 在網頁中佔有很重的地位,有些原本用 JavaScript 產生的效果都能單純使用 CSS 來做到,像是圖片按鈕的變換…等等的。現在要介紹的滑入式訊息選單就是使用 CSS 來做出讓人眼睛為之一亮的效果。

CSS 語法 - 網頁設計  - CSS 語法教學 - 隱藏式訊息區塊 - 簡易版 - fly10
首先來看 HTML 的部份:

使用 <ul> <li> 項目清單,裡面置入標題文字內容文字,還有全部用超連結包起來。



 

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

以上的 <li> 項目清單 多做幾個,先看一下 HTML 網頁原始的畫面:

CSS 語法 - 網頁設計  - CSS 語法教學 - 隱藏式訊息區塊 - 簡易版 - fly051

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

ul#gallery  {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 500px;
	height:450px;
	border: 4px solid #fc0;
	background-color: #ff6;
	font: 13px Arial, Helvetica, sans-serif;
}
ul#gallery li a {
	display: block;
	overflow: hidden;
	padding-left: 10px;
	line-height:30px;
	width: 492px;
	height: 30px;
	text-decoration: none;
	color: #600;
}
ul#gallery li a span{ color:#000;}
ul#gallery li a:hover {
	background-color: #fc0;
	height: 170px;
	color: #F00;
}
ul#gallery h3 {
	text-transform: uppercase;
	font: 13px "Arial Black", Arial, Helvetica, sans-serif;
}
ul#gallery b {
	color: #600;
}

 

重點是第 17 行,設定超連結的高度為 30px ,第 13 行設定 overflow:hidden 多出來的文字就會被隱藏起來。然後,在第 24 行設定當滑鼠摸到的時候,高度變成 170px ,效果就出來了!

套用 CSS 語法之後就來看效果如何囉!

CSS 語法 - 網頁設計  - CSS 語法教學 - 隱藏式訊息區塊 - 簡易版 - fly09

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

CSS 語法 - 網頁設計  - CSS 語法教學 - 隱藏式訊息區塊 - 簡易版 - fly101

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

範例瀏覽: http://www.flycan.com/example/abgne-css-menu-2/001.html

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

by
男丁格爾
老師

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

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

迴響已被關閉。