作業6：側欄 -- CSS Transition 與 JavaScript

[ccckmit]

請使用下列兩種方式做出可展開縮放的側欄

1. 使用 CSS Transition (滑鼠移入就展開，移出就縮小）
2. 使用 JavaScript (滑鼠點按就切換，展開或縮小）

(所有這次要交的作業有兩份， 1+2)

側欄拉開後，內容可放入你的個人網頁的各種頁面連結

1. 例如:自我介紹 / 作品 ....
2. 點選後會進入該頁面 ...

參考

1. https://www.w3schools.com/css/css3_transitions.asp
2. https://www.w3schools.com/jsref/event_onclick.asp

[ChadChenYu]

陳辰鈺,111210518

• 1.CSS
  原始碼
  網頁

---

• 2.JavaScript
  原始碼
  網頁

[Raylee123321]

李詠睿 111210508

1. CSS
   原始碼:https://github.com/Raylee123321/wp/blob/master/%E4%BD%9C%E6%A5%AD6.html
   網頁:https://raylee123321.github.io/wp/%E4%BD%9C%E6%A5%AD6.html

[Hfkem]

陳冠昀 111210503
1.css
網頁:https://hfkem.github.io/wp/html/0412.html
原始碼:https://github.com/Hfkem/wp/blob/master/html/0412.html
2.JavaScript
網頁:https://hfkem.github.io/wp/html/0412-2.html
原始碼:https://github.com/Hfkem/wp/blob/master/html/0412-2.html

作業2使用chatGPT輔助

[zerorezerorezero]

陳盈羽 111210521
1.CSS
網頁:https://zerorezerorezero.github.io/wp/javascript/HW6/CSSTrans.html
原始碼:https://github.com/zerorezerorezero/wp/blob/master/javascript/HW6/CSSTrans.html
2.JS
網頁:https://zerorezerorezero.github.io/wp/javascript/HW6/JSTrans.html
原始碼:https://github.com/zerorezerorezero/wp/blob/master/javascript/HW6/JSTrans.html

[taitaiwu]

吳佳泰 111210520

1. CSS版本

• 原始碼:https://github.com/taitaiwu/wp/blob/master/Homework6/%E5%80%8B%E4%BA%BA%E7%B6%B2%E7%AB%99.html
• 網頁:https://taitaiwu.github.io/wp/Homework6/%E5%80%8B%E4%BA%BA%E7%B6%B2%E7%AB%99.html

2. JavaScript版本

• 原始碼:https://github.com/taitaiwu/wp/blob/master/Homework6/%E5%80%8B%E4%BA%BA%E7%B6%B2%E7%AB%99(Javascript).html
• 網頁:https://taitaiwu.github.io/wp/Homework6/%E5%80%8B%E4%BA%BA%E7%B6%B2%E7%AB%99(Javascript).html

[wakaba0972]

吳秉昭 111211543

1. css

• 原始碼: https://github.com/wakaba0972/wp/tree/master/HW/HW06/p1
• 網頁: wakaba0972.github.io/wp/HW/HW06/p1/index.html

2. js

• 原始碼: https://github.com/wakaba0972/wp/tree/master/HW/HW06/p2
• 網頁: wakaba0972.github.io/wp/HW/HW06/p2/index.html

flex的用法參考自網路

[C10H8Nai]

林瑋哲 110910112

• 代碼
• 網頁

把1跟2整合在一個網頁中了，初始頁面滑鼠可以滑動左側，點擊可以切換固定或解除固定，右側可以切換日夜模式

[HJH60]

姓名： 胡佳慧
學號： 111010141

-README

[tonytomtody]

蔡瑞哲 111210504
1.原始碼
網頁
2.原始碼
網頁

[linpeic]

林沛欣,111210522
1.css
原始碼
網頁
2.js
原始碼
網頁

[shain120]

黃冠勝 111210540

1.css
原始碼：https://github.com/shain120/wp/blob/master/html/hw6/css_sidebar.html
網頁：https://shain120.github.io/wp/html/hw6/css_sidebar.html

2.js
原始碼：https://github.com/shain120/wp/blob/master/html/hw6/js_sidebar.html
網頁：https://shain120.github.io/wp/html/hw6/js_sidebar.html

[Dogcatlionz]

吳昱礽 111210509

1.CSS

• 原始碼 : https://github.com/Dogcatlionz/wp/blob/master/Homework6/%E5%81%B4%E6%AC%84(css).html
• 網頁 : https://dogcatlionz.github.io/wp/Homework6/%E5%81%B4%E6%AC%84(css).html

2.JavaScript

• 原始碼 : https://github.com/Dogcatlionz/wp/blob/master/Homework6/%E5%81%B4%E6%AC%84(JavaScript).html
• 網頁 : https://dogcatlionz.github.io/wp/Homework6/%E5%81%B4%E6%AC%84(JavaScript).html

參考W3Schools範例，並參考ChatGPT之隱藏連結、定位和鼠標懸停時連結顏色

[Erkmrcl17]

李麗恩 111210559

1.CSS
原始碼：https://github.com/Erkmrcl17/wp/blob/master/HW6/index.html
網頁：https://erkmrcl17.github.io/wp/HW6/index.html

2.JavaScript
原始碼：https://github.com/Erkmrcl17/wp/blob/master/HW6/indexx.html
網頁：https://erkmrcl17.github.io/wp/HW6/indexx.html

[Linyowe]

建築二 111113344 林右緯
javascript:
https://github.com/Linyowe/wp/blob/master/%E5%81%B4%E6%AC%84%20--%20CSS%20Transition%20%E8%88%87%20JavaScript/%E7%B6%B2%E9%A0%81%E4%BB%A3%E7%A2%BC.html

css:
https://github.com/Linyowe/wp/blob/master/%E5%81%B4%E6%AC%84%20--%20CSS%20Transition%20%E8%88%87%20JavaScript/style.css