動態導覽列為增加使用者經驗UX，要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)


職場產業

學習

音樂藝文

學習重點

影片教學

總結

額外資源教學

更多相關教學文章

<div class="draft-block draft--p left">動態導覽列為增加使用者經驗UX，要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)</div>
<h3 class="draft-block draft--h3" name="header-1p4aj">學習重點</h3>
<ul>
  <li class="draft-block draft--li">TailwindCSS Animation class</li>
  <li class="draft-block draft--li">position 運用</li>
  <li class="draft-block draft--li">和建制組件 Component</li>
</ul>
<h3 class="draft-block draft--h3" name="header-abb3k"></h3>
<h3 class="draft-block draft--h3" name="header-41g3r"><span style="font-weight: bold; ">影片教學</span></h3>
<div class="draft-block draft--p left"></div>
<div class="embed-block-prerender" data-type="html" data-url="https://youtu.be/dofElQ6xjeM"></div>
<div class="draft-block draft--p left"></div>
<h3 class="draft-block draft--h3" name="header-bmaoi">總結</h3>
<ul>
  <li class="draft-block draft--li">此為案例實戰，透過這個案例讓大家能更深入了解TailwildCSS運用</li>
</ul>
<div class="draft-block draft--p left"></div>
<h3 class="draft-block draft--h3" name="header-6t39b">額外資源教學</h3>
<div class="draft-block draft--p left">如果你對基礎有不了解地方可以前往以下去學習，Tailwind CSS 初學課程教學 - <a href="https://vocus.cc/article/64643471fd897800017d35e1" target="_blank" class="draft--a">https://vocus.cc/article/64643471fd897800017d35e1</a></div>
<div class="draft-block draft--p left"></div>
<h3 class="draft-block draft--h3" name="header-c9as5">更多相關教學文章</h3>
<div class="draft-block draft--p left">JayLinXR YT: <a href="https://www.youtube.com/@jaylinxr" target="_blank" class="draft--a">https://www.youtube.com/@jaylinxr</a></div>
<div class="draft-block draft--p left">JayLinXR IG: <a href="https://www.instagram.com/jaylin_xr/" target="_blank" class="draft--a">https://www.instagram.com/jaylin_xr/</a></div>

動態導覽列為增加使用者經驗UX，要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)

學習如何用 TailwindCSS | React | React Router v6 來做一個 動態導覽列 (Animated Navigation Bar)

此為案例實戰，透過這個案例讓大家能更深入了解TailwildCSS運用

如果你對基礎有不了解地方可以前往以下去學習，Tailwind CSS 初學課程教學 - https://vocus.cc/article/64643471fd897800017d35e1

JayLinXR YT: https://www.youtube.com/@jaylinxr

JayLinXR IG: https://www.instagram.com/jaylin_xr/

學習如何用 TailwindCSS | React | React Router 來做一個動態導覽列 

設計

想要知道如何用最新技術來製作一個App嗎? 跟著JayLin用React | Redux Tool Kit | TypeScript | TailwildCSS 來製作一個Drawing App

學習如何用 React & Redux | TypeScript | Tailwind CSS 來做一個繪圖App

教大家如何用TailwindCSS來做現代蠻流行的DarkMode和LightMode之間轉換😃
註: 最後面"dark"請改為"black"，錄製太快沒有看到有錯誤



JayLin教你製作DarkMode & LightMode 主題在你的網站上

跟Jay Lin一起做App

設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr 

JayLinXR的沙龍

Elder Ring 出來後，在業餘時間製作出 Animated Navigation Bar 教學影片 😆
如果喜歡我的視頻，請幫忙點個讚和分享呦 😃

導師培訓課程，One-One學程式有清晰規劃，JayLin幫你解惑
https://jaylinxr-academy.vercel.app/

------------------------------------------------------------------------------------------------------------------------

成為Web3.0 & 區塊鏈工程師 (Blockchain Developer)
https://youtube.com/playlist?list=PLm5zwchfUTJBc2iuqrfYG1DX3lyaVPcb8

用Figma | Next.js做一個簡單的作品集(Portfolio)
https://youtube.com/playlist?list=PLm5zwchfUTJCgxNUOFVcnFwxOXap1jU9-

跟Jay Lin一起做App
https://youtube.com/playlist?list=PLm5zwchfUTJByl40z4jeEIM7dAZMY9EQU

VR | AR | XR | Metaverse 元宇宙教學
https://youtube.com/playlist?list=PLm5zwchfUTJDlBTpcbK06Ioq-PWGFPxR1

初學Coding系列教學
https://youtube.com/playlist?list=PLm5zwchfUTJDfnDyHz4BNEWZ91OTKM9vd

Tailwind CSS 教學
https://youtube.com/playlist?list=PLm5zwchfUTJBaXJshurb1-xnACAZDyEu8

=======遊戲討論區 & 技術社群討論=======

加入遊戲社群和討論相關技術:
https://www.youtube.com/channel/UCM1aHkQKF2iiHGS4fBO7rRQ

JayLinXR 粉絲團:
https://www.facebook.com/JayLinXR