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

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

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

原樣式：


768px 以下：


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

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

## 回報流程

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


<!--

解答：
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]() |
-->