iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 24
0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 24

Day24 網頁前端-刻意練習(Off Canvas #3)

Day24 六角 Off Canvas #3

https://ithelp.ithome.com.tw/upload/images/20200923/20129161ZnBZ0kQtJt.jpg
https://ithelp.ithome.com.tw/upload/images/20200923/201291618djngyL9jB.png

簡單小語

沒想到OffCanvas練習了三篇,看到這個版覺得有趣,立馬又想寫一個,雖然有些效果不同但大部分應該是相同的吧(遲疑ing),按鈕的轉換效果用了偽元素方式,不知道這樣算及格嗎?想了一想JQuery的點擊事件練習了好多,header的運用也要背起了哈哈,不過每次的練習真的都有發現不足的地方,觀念錯誤的地方,與預期輸出結果不同的地方,反覆修正練習,總會有些成果的吧,最常發現尺寸計算錯誤,樣式出來都破掉或怪怪的,繼續加油囉。

筆記分享

  1. 這次的menu沒有包在wrap裡,不然點擊事件時移動怪怪的。
  2. body中使用overflow-x:hidden,隱藏了水平的破版範圍。
  3. 運用了兩個position:fixed,menubtn,移動時訂在畫面中。
  4. linear-gradient又出現了,看了配色網站就不怕顏色突兀了。
  5. 小小btn做了許多效果,color, hover, :before, :after, .active:before, .active:after, transition
  6. li a利用選取器first-child選到第一個讓樣式與其他不同。
  7. menuborder-bottom利用box-shadow製造一些陰影,帶點立體效果。
  8. 點擊出現的灰色陰影,另外撰寫class=”background”,佔滿整個畫面,再利用z-index排列階層避免覆蓋。
  9. “三”變”X”就是靠.active:before, .active:after更改樣式,做出差不多效果。
  10. 移動利用transform:translateX(),點擊事件來移動,注意menuwrap的位置。

刻意練習

Practice(200817 Day 24)

樣板來源

Off-Canvas Menu


2020 iT邦幫忙鐵人賽 Day24 網頁前端-刻意練習(Off Canvas #3)


上一篇
Day23 網頁前端-刻意練習(Off Canvas #2)
下一篇
Day25 網頁前端-刻意練習(RWD#1)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40

尚未有邦友留言

立即登入留言