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

Day 11

Day11 金魚 多層次收合選單

簡單小語

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

筆記分享

1. search bar的空間分佈及樣式分配需多加練習，常常看到但不確定是否用到，長寬分配都要注意。
2. .btn的.fas可以利用transform: scaleX(1,-1)達到點選後衛位置互換的效果。
3. 背景使用好久不見的linear-gradient練習漸層色的使用方法，加深記憶。
4. 點選觸發的class及欲改變的class可以想想更語意化的命名方式，讓人一眼先了解功能大致為何。
5. 多層次選的的ul及li須釐清目前為哪一層級哪一結構，才不會像我後面都眼花撩亂。
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_多層次收合選單)