組件實作 : Demo

一、前言

List 也是一種很常見的功能，其實 List 可以跟之前做的 Day 18：Collapsibles 組件實作 搭配使用，也可以和 Day 19：滑動頁面組件實作 一起，總之，我想表達的意思是：List 是一種可以混搭的組件，那麼，現在我就一起來看看這個組件該如何實作吧！

List 組件實作參考來源【1】。

二、直接實作 List 組件

2.1 基本 List 架構

這裡使用一個 class 名稱為 menu 的 div，在 menu 裡面使用 a 元素製作清單。其中的 active 用來標註成其它顏色，用來區分標題和內容，程式碼如下。

HTML：

<div class="menu">
  <a href="#" class="active">洋泉酒佳</a>
  <a href="#">好吃的飯</a>
  <a href="#">好吃的麵</a>
  <a href="#">好吃的肉</a>
  <a href="#">黑暗料理</a>
</div>

顯示結果：

這是可以加入 CSS 樣式，完成後即可得到一個最基本的 List 。

CSS：

.menu {
	width: 200px;
}

.menu a {
	background-color: #eee;
	color: black;
	display: block;
	padding: 12px;
	text-decoration: none;
}

.menu a:hover {
	background-color: #fff;
}

.menu a.active {
	background-color: #9c64aa;
	color: white;
}

顯示結果：

三、Vertical Scroll Menu

原本以為垂直捲動的 List 應該不常見，後來發現是我沒注意到，其實捲動的 List 非常常見，舉一個例子，像是 W3schools 或是 MDN 的側邊欄都有 List 的蹤跡，至於如何實作，依靠的是overflow-y。

實際上只要讓 List 當前的高度設定比 List 原本的高度還來的小，並且把 overflow-y 設定為 auto，這時的 List 即可捲動，使用程式碼如下。

CSS：

.menu {
	width: 250px;
	height: 100px;
	overflow-y: auto;
}

顯示結果：

四、推薦資源

1. 18 CSS Lists
2. Pens tagged 'list' on CodePen

五、結論

原本以為要實作 List 可能會很困難，所以特意留了一個篇章來介紹它的用法，結果產生 List 竟然就這樣快速的結束了。原本擔心字數會不夠，想說要來實作一個左右欄的排版好了，但是我在做到一半，發現用 position 設定為 fixed 的定位方式，在畫面規劃上似乎有點麻煩，於是思考這種左右欄位分割的排版方式，覺得直接使用 Grid 來實作應該會比較容易一點？但是為了趕文章，用 Grid 排版的實驗只好先往後延了。

六、參考資料

1. How TO - Vertical Menu