製作簡單的側邊欄

一個web不可能只有一個頁面，所以我們需要超連結去幫助用戶前往其他頁面。所以我們今天來做一個簡單的side bar八

成品長這樣:

簡單的side bar

事前準備:

1. 創task.html(以後的todolist就都會在這個檔案裡)
2. 創sideBar.css(side bar 的排版都會在這)
3. 創一個資料夾image 存放圖片

歐對了，我是從google font(Material Symbols & Icons - Google Fonts)那裡把icon下載下來的，然後放在叫image的資料夾

ps 你下載的時候會看到，PNG跟SVG這兩個選項，一個是點陣圖，另一個是向量圖。

向量圖的缺點是當圖形複雜時檔案會很大，但相對圖片可以動態的更改顏色，以及放大不失會糊掉。

啊我是隨便點一個拉，畢竟我覺得我很久之後才會用到SVG的應用ww。

想先學的我連結放這

SVG-概述 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)

html 的部分:

首先，先創一個div

<div class="sidebar"></div>

接著，我們宣告一個超連結<a>

ps 不熟<a> 可以去這看一下

第5天:HTML-網頁間的連結 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)

接著將圖片(img)丟進去<a>裡，並設定href(目標網址)

<a href="index.html"><img src="image/menu_24dp_FILL0_wght400_GRAD0_opsz24.png"></a>

如法炮製

<div class="sidebar">
		<a href="index.html"><img src="image/menu_24dp_FILL0_wght400_GRAD0_opsz24.png"></a>
   	<a><img src="image/home_24dp_FILL0_wght400_GRAD0_opsz24.png"></a>
    <a href="task.html"><img src="image/task_24dp_FILL0_wght400_GRAD0_opsz24.png"></a>
    <a><img src="image/settings_24dp_FILL0_wght400_GRAD0_opsz24.png"></a>
</div>

task.html

css的部分:

先在head 裡打這行，連接html與css

 <link rel="stylesheet" href="sideBar.css">

大小 顏色

接著將基本的大小跟顏色設定好

*{
		/*將預設的padding跟 margin歸零*/
    margin: 0px;
    padding: 0px;
}
.sidebar{
    width: 100vw;
    background-color: rgb(224, 102, 15);
}
.sidebar a{
    padding: 5px;
}
.sidebar a img{
    height: 40px;
    width: 40px;
}

排版

我希望四個icon 可以平分整個side bar的空間

所以加這兩行

.sidebar{
    display: flex;
}

.sidebar a{
		flex-grow: 1;
}

ps 如果不熟flex的話

CSS | 所以我說那個版能不能好切一點？ - Flex 基本用法 | by 神Q超人 | Enjoy life enjoy coding | Medium

並讓icon在<a>的中心

.sidebar a{
    display: flex;
    justify-content: center;
    align-content: center;
}

再將side bar放在底部

.sidebar{
    position: absolute;
    bottom: 0px;
}

互動

最後讓滑鼠滑過去時，有些反應

.sidebar a:hover{
    cursor: pointer;
    background-color: rgb(227, 138, 49);
}

將整個task.html的程式複製到index.html就能切換頁面了