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

# 🏅 切版任務 Day12 - 運用 jQuery 呈現手機版漢堡選單效果

## 題目
複製此 [Codepen](https://codepen.io/jmimiding4104/pen/mdgvXWX) 模板，練習運用 jQuery 當點擊按鈕時，使 ul 選單可以隨著按鈕點擊開啟、隱藏。並運用 position 讓選單展開時可以覆蓋在下方文字上（針對 CSS JS 區塊內 … 的部分作修改）。

會呈現下面的畫面：

## 回報流程

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


<!--

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

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:--------------------:|:---------------------------------------------------------------------------:|
| 1 | 白白 | [Codepen](https://codepen.io/YuBai/pen/jORggwg) |
|2|Camila|[Codepen](https://codepen.io/camilalo/pen/bGybwPb)|
| 3 | Andy_12 | [Codepen](https://codepen.io/lifann/pen/PovojmG) |
| 4 | Meng | [Codepen](https://codepen.io/menglin1203/pen/NWVKEVz) |
| 5 | larry | [Codepen](https://codepen.io/larrylinr5/pen/PovoErx?editors=0110) |
|6|Michelle0417|[Codepen](https://codepen.io/michelle0417/pen/BaeaJEv)|
|7|yuling|[Codepen](https://codepen.io/igzdflpu/pen/VwOwQvx)|
| 8 | tim |[Codepen](https://codepen.io/jskrtivy-the-animator/pen/dyEydpe)|
| 9 | CrystalLala | [Codepen](https://codepen.io/crystallala/pen/ExzxQZv) |
| 10 | Aya | [Codepen](https://codepen.io/NoNameNote/pen/eYaYZmd) |
| 11 | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/abrbqNw) |
| 12 | LGJason | [Codepen](https://codepen.io/j811108/pen/abrbqQG) |
| 13 | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/wvbvymv?editors=0010) |
| 14 | Mionne | [Codepen](https://codepen.io/neohyntw/pen/YzbzeMM) |
| 15 | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/jOoOzWw) |
| 16 | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/QWRWQYK?editors=0110) |
| 17 | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/NWVWYNd)|
| 18 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/LYoYdjK)|
| 19 | 阿若 | [Codepen](https://codepen.io/skar5268/pen/JjqjLzP) |
| 20 | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/dyEydjQ) |
| 21 | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/VwOwXJa?editors=1111) |
| 22 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/vYwYjGx) |
| 23 | Lauren | [Codepen](https://codepen.io/Lauren8/pen/MWdWGeR) |
| 24 | boin | [Codepen](https://codepen.io/boinji/pen/PovoeZO) |
| 25 | JY | [Codepen](https://codepen.io/jylee0805/pen/vYwYjWJ?editors=0110) |
| 26 | LYC | [Codepen](https://codepen.io/LY-C/pen/PovoaZV) |
| 27 | LiLiLiLi | [Codepen](https://codepen.io/jungang0414/pen/GRaRGYb) |
| 28 | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/XWwWBWE) |
| 29 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/RwmwBPb)|
| 30 | peggy |[Codepen](https://codepen.io/peggy0419/pen/WNBNKxp)|
| 31 | KUN. | [Codepen](https://codepen.io/barry91205/pen/bGyGmjd) |
| 32 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/LYoYXpq) |
| 33 | leo.chang | [Codepen](https://codepen.io/s16777216/pen/NWVWEOa) |
| 34 | 阿宸 | [Codepen](https://codepen.io/xnocndjt-the-sans/pen/wvbvRZR) |
| 35 | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/JjqjxLL) |
| 36 | suandme | [Codepen](https://codepen.io/su-su-the-sans/pen/Yzbzgpm) |
| 37 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/zYQYzOa) |
| 38 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/gOJbOjw) |
| 39 | Zander | [Codepen](https://codepen.io/chuangmaster/pen/PovwozP) |
| 40 | oldan | [Codepen](https://codepen.io/Enix-Chien-/pen/MWdYWYv) |
| 41 | 薛逢 | [Codepen](https://codepen.io/vogqyrrj-the-selector/pen/wvbBvQe) |
| 42 | maru3096 | [Codepen](https://codepen.io/deamru/pen/rNgaamX) |
| 43 | Maxine | [Codepen](https://codepen.io/Maxine0713/pen/yLWyOLL)|
| 44 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/PovwNRg) |
| 45 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/PovwWxb?editors=0110) |
| 46 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/YzbPZNp) |
| 47 | Jenny_7314 | [Codepen](https://codepen.io/Jenny_000/pen/GRagvZW) |
| 48 | Eden| [Codepen](https://codepen.io/iseden/pen/jOoEaKG)|
| 49 | hongru-LyNn | [Codepen](https://codepen.io/LyNnYWu/pen/JjqoOPZ) |
| 50 | Yuwen | [Codepen](https://codepen.io/Yuwen-the-reactor/pen/yLWyPZj) |
| 51 | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/dyEPJxR) |
| 52 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/NWVPzjV)|
| 53 | Emma | [Codepen](https://codepen.io/huang_L/pen/MWdYXGe)|
| 54 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/jOoEvPz) |
| 55 | Eileen | [Codepen](https://codepen.io/Eileen-io/pen/Jjqoeye) |
| 56 | macihuang | [Codepen](https://codepen.io/macy1215/pen/dyEPgrj) |
| 57 | 快樂小豬 | [Codepen](https://codepen.io/rtjowfyf-the-lessful/pen/dyEopJM) |
| 58 | yo0x0oy | [Codepen](https://codepen.io/Dayton-Hsieh/pen/WNBvKKo)|
| 59 | Areta | [Codepen](https://codepen.io/Areta-Gu/pen/VwOLVaG)|
| 60 | Joey一針 | [Codepen](https://codepen.io/joeychou/pen/pomjbNy) |
| 61 | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/mdYJrYB) |
| 62 | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/ExzVvGB) |
| 63 | Haley | [Codepen](https://codepen.io/wsx3690/pen/OJYyvQK) |
| 64 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/XWwXVaY) |
| 65 | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/oNRNVEK) |
| 66 |Yini Chen| [Codepen](https://codepen.io/CYini/pen/BaejEBB) |
| 67 |Sammy| [Codepen](https://codepen.io/fsczdlla-the-bold/pen/NWVWYGb?editors=1010) |
| 68 |Jess| [Codepen](https://codepen.io/-8412/pen/KKLzKMj) |
| 69 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/XWwdQOq) |
| 70 | ZZ | [Codepen](https://codepen.io/Yong-Shao/pen/eYadmxE) |
| 71 | arthur | [Codepen](https://codepen.io/vzqfnjnz-the-flexboxer/pen/PovGpGx) |
| 72 | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/VwOKRBP) |
| 73 | kawa | [Codepen](https://codepen.io/z83xji6/pen/BaeQaXP) |
| 74 | mike_2049 | [Codepen](https://codepen.io/mike2049/pen/jOoVEWo) |
| 75 | haojing | [Codepen](https://codepen.io/hjxu/pen/GRajaqV) |
| 76 | tzhengliin(子恆) | [Codepen](https://codepen.io/tzhengliin/pen/abrBgvP) |
| 77 | Anais77 | [Codepen](https://codepen.io/liu-anais/pen/Rwmpwpw) |
| 78 | maruko1105 | [Codepen](https://codepen.io/marukox1105/pen/WNBpjyb) |
| 79 | emmayo | [Codepen](https://codepen.io/emmayo/pen/bGyqRMq) |

<!--【快速複製】
| num | user | [Codepen]() |
-- >