學習如何用 TailwindCSS | React | React Router 來做一個動態導覽列
閱讀時間約 1 分鐘
動態導覽列為增加使用者經驗UX，要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)
學習重點
- TailwindCSS Animation class
- position 運用
- 和建制組件 Component
影片教學
總結
- 此為案例實戰，透過這個案例讓大家能更深入了解TailwildCSS運用
額外資源教學
如果你對基礎有不了解地方可以前往以下去學習，Tailwind CSS 初學課程教學 - https://vocus.cc/article/64643471fd897800017d35e1
更多相關教學文章
JayLinXR YT: https://www.youtube.com/@jaylinxr
JayLinXR IG: https://www.instagram.com/jaylin_xr/
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
11會員
32Content count
設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
留言0
查看全部
你可能也想看
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
現代教育強調創新教學法，家庭教育中也可應用這些方法來激發孩子的學習興趣，本文將分享如何在家庭中使用翻轉教室和STEM教育等方法。
應用翻轉教室
讓孩子在家中預習學習材料，課後進行討論和實踐。
引入STEM教育
在家庭中進行簡單的科學實驗和工程項目。
鼓勵自主學習
-
「第一大腦儲存事物與概念的記憶，是分佈式儲存在一個龐大的神經網路。」
這好像蠻有道理，也解釋了寫作的時候，感覺很多回憶透過寫著寫著都連結起來。
所以，其實很多想法就在我們的腦子裡，但要怎麼有效將這些想法叫回來不容易。
我研究卡片盒筆記法收穫最大的，是把想法編號做索引的這個操作。
有些人20歲時就死了，只是等80歲才埋葬。
你可能有聽過這句很有名的名言，看看自己和身邊的人，是不是已經停止前進了呢？
自從疫情改變了學校教學的狀態以後，多元化的教學媒材也紛紛滲入教育之中。既然讓孩子接觸多媒體已經是無法阻止的事實，透過科技來輔助教師分析學生的學習狀況，又何嘗不是一件好事呢？這篇文章想要分享這兩年我是如何打造我的智慧教室，也會提及我如何運用科技來輔助教學、診斷學生的學習。
經歷過疫情以後，我們透過遠距線上教學實現學習的可能性，有越來越多的人了解到學校與文憑不是學習唯一管道，現在我們在自主學習的路上多了一個工具：ChatGPT。
這篇文章是我重點吸收《超速學習》一書如何做的部分，結合ChatGPT，加上我自己實際應用過後的心得，希望可以把它化為一個簡單且實用的方法與步
本文章介紹了間隔重複的概念，並說明了有哪些程式可以透過間隔重複來提高學習和記憶的效率，並提醒讀者要保持彈性，最後在文章結尾附上了間隔重複相關的科學論文。
生活跟工作當中，我們常常運用書籍閱讀、生活觀察、網路搜尋來做情報的蒐集，要提高情報蒐集的品質要做到速度、深度、廣度三點。
➊速度：運用關鍵字搜尋，並且要搜尋第一手資訊。
➋深度：做好主題式學習，內容要多樣性且高價值。
➌廣度：連結生活與工作，提煉案例並作回饋分析。
本文章介紹了遺忘曲線和間距效應的概念，並說明了如何利用這兩個心理學原理來提高學習和記憶的效率。我分享了使用Memory Helper這個App來設定複習時間的經驗，並提醒讀者要保持彈性和自我寬容。
有的自閉症者管到無極限，有的自閉症者完全事不關己。
因此，要用自閉症者的學習方式，協助自閉症者見到人際界線。
視覺自閉症者用社交情境故事圖卡，聽覺自閉症者以討論分析狀況為主
之前的文章，有提到用因果關係進行。
而前提是，那是解決事不關己的自閉症者用的。
這次，我想補充的，是管到無極限的自閉症者，進行
最近的土耳其敍利亞大地震，因人手不夠，台灣的搜救隊進行回報。
因為台灣的九二一大地震，土耳其搜救隊有前來支援。
而在防震知識不斷更新，除了第一時間協助自閉症者更新防震知識，也要用自閉症者的方式，進行學習。
視覺自閉症者要用圖卡配對，聽覺自閉症者要進行聽指令
目前最近的防震措施，是〝趴、扶、穩〞。
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
現代教育強調創新教學法，家庭教育中也可應用這些方法來激發孩子的學習興趣，本文將分享如何在家庭中使用翻轉教室和STEM教育等方法。
應用翻轉教室
讓孩子在家中預習學習材料，課後進行討論和實踐。
引入STEM教育
在家庭中進行簡單的科學實驗和工程項目。
鼓勵自主學習
-
「第一大腦儲存事物與概念的記憶，是分佈式儲存在一個龐大的神經網路。」
這好像蠻有道理，也解釋了寫作的時候，感覺很多回憶透過寫著寫著都連結起來。
所以，其實很多想法就在我們的腦子裡，但要怎麼有效將這些想法叫回來不容易。
我研究卡片盒筆記法收穫最大的，是把想法編號做索引的這個操作。
有些人20歲時就死了，只是等80歲才埋葬。
你可能有聽過這句很有名的名言，看看自己和身邊的人，是不是已經停止前進了呢？
自從疫情改變了學校教學的狀態以後，多元化的教學媒材也紛紛滲入教育之中。既然讓孩子接觸多媒體已經是無法阻止的事實，透過科技來輔助教師分析學生的學習狀況，又何嘗不是一件好事呢？這篇文章想要分享這兩年我是如何打造我的智慧教室，也會提及我如何運用科技來輔助教學、診斷學生的學習。
經歷過疫情以後，我們透過遠距線上教學實現學習的可能性，有越來越多的人了解到學校與文憑不是學習唯一管道，現在我們在自主學習的路上多了一個工具：ChatGPT。
這篇文章是我重點吸收《超速學習》一書如何做的部分，結合ChatGPT，加上我自己實際應用過後的心得，希望可以把它化為一個簡單且實用的方法與步
本文章介紹了間隔重複的概念，並說明了有哪些程式可以透過間隔重複來提高學習和記憶的效率，並提醒讀者要保持彈性，最後在文章結尾附上了間隔重複相關的科學論文。
生活跟工作當中，我們常常運用書籍閱讀、生活觀察、網路搜尋來做情報的蒐集，要提高情報蒐集的品質要做到速度、深度、廣度三點。
➊速度：運用關鍵字搜尋，並且要搜尋第一手資訊。
➋深度：做好主題式學習，內容要多樣性且高價值。
➌廣度：連結生活與工作，提煉案例並作回饋分析。
本文章介紹了遺忘曲線和間距效應的概念，並說明了如何利用這兩個心理學原理來提高學習和記憶的效率。我分享了使用Memory Helper這個App來設定複習時間的經驗，並提醒讀者要保持彈性和自我寬容。
有的自閉症者管到無極限，有的自閉症者完全事不關己。
因此，要用自閉症者的學習方式，協助自閉症者見到人際界線。
視覺自閉症者用社交情境故事圖卡，聽覺自閉症者以討論分析狀況為主
之前的文章，有提到用因果關係進行。
而前提是，那是解決事不關己的自閉症者用的。
這次，我想補充的，是管到無極限的自閉症者，進行
最近的土耳其敍利亞大地震，因人手不夠，台灣的搜救隊進行回報。
因為台灣的九二一大地震，土耳其搜救隊有前來支援。
而在防震知識不斷更新，除了第一時間協助自閉症者更新防震知識，也要用自閉症者的方式，進行學習。
視覺自閉症者要用圖卡配對，聽覺自閉症者要進行聽指令
目前最近的防震措施，是〝趴、扶、穩〞。