🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正／微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付
上週末，我使用 HTML 和 CSS 編寫了互動式導覽（這次沒有使用 JavaScript）：
https://codepen.io/alvaromontoro/pen/yLWeozP
（如果您錯過了初始動畫，或者想再次看到它，請點擊右下角的「重新執行」。）
對於這個演示：
-
我嘗試堅持使用語義 HTML 並提供一種可存取的方法（希望我沒有搞亂這部分）。
-
初始載入動畫是只執行一次並在之後保持原樣的
animation。 -
使用 3D CSS 使清單元素彈出和返回。
-
焦點和懸停狀態受到同等對待，因此滑鼠和鍵盤使用者都會獲得相似的體驗。
-
它具有減少運動的樣式，可以降低動畫和過渡速度，因此沒有太多的運動（導航專案仍會彈出，但不會動畫化）。
-
我使用
drop-shadow()過濾器產生整個選單的陰影（獨立於選單專案的陰影）。 -
還使用
box-shadow為兄弟姐妹加入嵌入陰影並提供更大的深度感。我一開始是用陰影來做的，但我遇到了一些麻煩，所以我可能會把它們弄得過於複雜了。 -
我使用
:has()選擇處於活動狀態的兄弟姐妹（前一個和後一個），並為其加入一些深度和陰影。 -
它使用 Font Awesome 作為圖示。
感謝您檢查該元件。如果您有任何疑問，請告訴我。歡迎所有回饋和建議！
原文出處：https://dev.to/alvaromontoro/animated-navigation-menu-57o7
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章
🏆 本月排行榜
評分標準：發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次
🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正／微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付