iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

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

Day11 網頁前端-刻意練習(多層次收合選單)

Day11 金魚 多層次收合選單

https://ithelp.ithome.com.tw/upload/images/20200910/20129161Tm0LByJmX4.jpg
https://ithelp.ithome.com.tw/upload/images/20200910/20129161Q8lVK0HkjI.png

簡單小語

這個練習有覺得難了些,必須參考之前的寫法才能將多層次選單寫出來,RWD方面也是思考了一番,經過昨天的練習知道了在JQuery中也可以用media query終於解惑,現在都練習都會思考著對使用者來說怎樣的設計才流暢以及符合點選及觸發的流程,RWD就更不用說了,在320px的空間下要呈現怎麼樣的資訊及如何排版,也是一門學問,這次的刻意練習有點眼花撩亂,因為在ul中的li又再包ulli然後下一層又是ulli,看來觀念及基礎不紮穩,真的會不知所云,持續努力。

筆記分享

  1. search bar的空間分佈及樣式分配需多加練習,常常看到但不確定是否用到,長寬分配都要注意。
  2. .btn的.fas可以利用transform: scaleX(1,-1)達到點選後衛位置互換的效果。
  3. 背景使用好久不見的linear-gradient練習漸層色的使用方法,加深記憶。
  4. 點選觸發的class及欲改變的class可以想想更語意化的命名方式,讓人一眼先了解功能大致為何。
  5. 多層次選的的ulli須釐清目前為哪一層級哪一結構,才不會像我後面都眼花撩亂。
  6. 利用hover的方式叫出多層次選單,好處是當游標離開即會消失,避免擋住使用者的主畫面。
  7. 樣式部分近期卡關都做得差不多,我想是我網站看得不多導致靈感欠佳。
  8. 如何讓.btn.fas可以在手機顯示上下時,需考慮.btn的空間以及.fas大小及擺放位置,才不會讓使用者覺得卡卡。
  9. JQuery也可以用media query,if ($(window).width() < 768) {…condition…}
  10. 其實可以發現當層次越多HTML撰寫的長度就越長,該如何能快速選到所要的class,選取器的概念就很重要。
.menu li:hover>ul {
   display: block;
}
.menu li>ul>li a.active {
   color: #0a4b83;
   border: 2px solid #0a4b83;
   background-color: white;
}

刻意練習

Practice(200731 Day 11)

首次練習

Practice(200528_多層次收合選單)


2020 iT邦幫忙鐵人賽 Day11 網頁前端-刻意練習(多層次收合選單)


上一篇
Day10 網頁前端-刻意練習(文字排版)
下一篇
Day12 網頁前端-刻意練習(不規則邊緣)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40

尚未有邦友留言

立即登入留言