---
# System prepended metadata

title: "\U0001F3C5 切版任務 Day18 - Navbar 隨著斷點變換樣式、排版"
tags: [軟體工程師體驗營 - 2024]

---

---
tags: 軟體工程師體驗營 - 2024
---

# 🏅 切版任務 Day18 - Navbar 隨著斷點變換樣式、排版

運用此 [Codepen](https://codepen.io/jmimiding4104/pen/oNRjaBz) 模板，嘗試練習將 Navbar 選單在 768px 以下時調整成以下畫面：
（只需調整 CSS 區塊 `...` 的部分）

原樣式：

![](https://imgur.com/2s6x1eC.png)

768px 以下：

![](https://imgur.com/HHNKqoA.png)

> 詳細相關文字、留白間距設定可以參考本次主線任務設計稿


### 進階題
嘗試運用 jQuery，當 768px 以下時，點擊漢堡選單按鈕，使選單可以展開、收合
>可參考 [DAY12](https://hackmd.io/8Z_LG18pRy69miRyWX6ymQ) 的作業內容




## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）

![](https://i.imgur.com/vftL5i0.png)

<!-- 

解答：
https://codepen.io/jmimiding4104/pen/OJYyQwo

進階題：
https://codepen.io/jmimiding4104/pen/PovPREr

-->


回報區
---

| 報數 | Discord 名字  |  Codepen／其他回饋                                                         |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | Meng | [Codepen](https://codepen.io/menglin1203/pen/PovZLjx) |
| 2 | Michelle0417 | [Codepen](https://codepen.io/michelle0417/pen/QWRyoge) |
|  3  | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/Rwmrdeq) |
|  4  | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/qBGbvwo) |
|  5  | Aya | [Codepen](https://codepen.io/NoNameNote/pen/YzbwMzd) |
|  6  | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/vYwLMWo) |
|  7  | Ariel | [Codepen](https://codepen.io/ariel0510/pen/XWwXQZY) |
|  8  | Emma | [Codepen](https://codepen.io/huang_L/pen/rNgxbPZ) |
|  9  | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/vYwLPJj) |
| 10 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/BaejEgW) |
| 11 | JUN_ |[Codepen](https://codepen.io/Jun-L/pen/qBGbGrE) |
| 12 | s870012 |[Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/JjqGqaG) |
| 13 | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/mdYVYYq)|
| 14 | Zander | [Codepen](https://codepen.io/chuangmaster/pen/oNRbOqO)|
| 15 | jerry | [Codepen](https://codepen.io/sony791210/pen/vYwLqVz)|
| 16 | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/rNgxRZj)|
| 17 | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/eYaJqEy)|
| 18 | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/NWVxVLB?editors=0110)|
| 19 | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/RwmawWx)|
| 20 | Mionne | [Codepen](https://codepen.io/neohyntw/pen/WNBwbvr)|
| 21 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/ExzKape) |
| 22 | leo.chang | [Codepen](https://codepen.io/s16777216/pen/ExzPgPR) |
| 23 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/OJYNPWP) |
|  24  | 薛逢 | [Codepen](https://codepen.io/vogqyrrj-the-selector/pen/BaeKNWd) |
|  25  | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/bGypExB) |
|  26  | Lauren | [Codepen](https://codepen.io/Lauren8/pen/rNgeyyY) |
|  27  | JY | [Codepen](https://codepen.io/jylee0805/pen/gOJrRRj?editors=1100) |
|  28  | Camila | [Codepen](https://codepen.io/camilalo/pen/pomywMy) |
|  29  | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/KKLzqGw) |
|  30  | peggy | [Codepen](https://codepen.io/peggy0419/pen/KKLzXVQ) |
|  31  | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/gOJrGOM) |
|  32  | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/pomypKw) |
|  33  | 阿若 | [Codepen](https://codepen.io/skar5268/pen/gOJrzKb) |
|  34  | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/NWVNMod) |
|  35  | Joey一針 | [Codepen](https://codepen.io/joeychou/pen/LYoNaMO) |
|  36  | LiLiLiLi | [Codepen](https://codepen.io/jungang0414/pen/abrNMrw) |
|  37  | boin | [Codepen](https://codepen.io/boinji/pen/pomyBVe)|
|  38  |  小趴 | [Codepen](https://codepen.io/papa2415/pen/NWVNJao)
|  39  |  快樂小豬 | [Codepen](https://codepen.io/rtjowfyf-the-lessful/pen/PovzgzV?editors=1111) |
|  40  |  Sonia | [Codepen](https://codepen.io/YUJOU/pen/PovGZOg) |
|  41  | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/gOJrxmV) |
|  42  | macihuang | [Codepen](https://codepen.io/macy1215/pen/YzbGYPY) |
| 43 | Hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/abrmbVv) |
| 44 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/NWVRQaV) |
| 45  | kawa | [Codepen](https://codepen.io/z83xji6/pen/ZENBYYE) |
| 46  | mike_2049 | [Codepen](https://codepen.io/mike2049/pen/VwOmYqB?editors=1010) |
| 47 | Eden | [Codepen](https://codepen.io/iseden/pen/LYobpxE)|
| 48 | JESS | [Codepen](https://codepen.io/-8412/pen/rNgeQEj)|
| 49 | Yini Chen | [Codepen](https://codepen.io/CYini/pen/OJYbjwd)|
| 50 | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/LYobEGy) |
|  51  | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/WNBogdW) |
|  52  | 白白 | [Codepen](https://codepen.io/YuBai/pen/Yzbqaqx) |
|  53  | LYC | [Codepen](https://codepen.io/LY-C/pen/XWwMWmE) |
|  54  | maruko1105 | [Codepen](https://codepen.io/marukox1105/pen/GRaWvWE) |
|  55  | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/jOomGjb)|
|  56  | Anais77 | [Codepen](https://codepen.io/liu-anais/pen/ExzXPbJ) |
|  57  | 勾小勻 | [Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/jOowLNm) |
|  58  | hao jing | [Codepen](https://codepen.io/hjxu/pen/RwmLmWP) |
|  59  | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/RwmjwyM)</br>[Codepen進階題](https://codepen.io/nnxucgmc-the-builder/pen/PovOJQW) |
|  60  | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/xxNWwwM) |
| 61 | maru3096 | [codepen](https://codepen.io/deamru/pen/ZEdqNbz?editors=1010) |

---



<!--
|  num  | user | [Codepen]() |
-->