更新於 2024/06/30閱讀時間約 4 分鐘

製作簡單的側邊欄

一個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就能切換頁面了




分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.