【CSS】製作滑塊選單效果

CSS Float 仍然是網頁設計中一個不可忽視的工具。 儘管現有技術如 Flexbox 和 Grid 提供了更優雅的解決方案，但浮動仍然在某些特定情境下能夠發揮關鍵作用。 了解它的運作原理及最佳實踐，可以使您在設計界面時做出更科學的選擇。

讓選單固定在上方的效果對於行動裝置的UX十分重要， 尤其是部落格文章通常都不會太短，它可以讓使用者不用在看完文章後想點其他連結時一直往上滑 (當然可能有95%的人文章看完後就關掉網站了...)

不用javascript單純利用CSS製作浮動選單，選單會出現在網頁內容最上層，看起來像是浮在上面，當瀏覽器向下瀏覽時，選單停留在固定位置，不會移動。

浮動元素 ( float ) 一直都是網頁排版的主要技巧，這篇教學除了會介紹 float 屬性的語法，也會深入探討浮動元素和 inline 元素與 block 元素在排版的互動或換行情況，以及 clear 清除浮動的屬性語法。

然而，在它們普及之前，CSS 的 float（浮動）屬性扮演了網頁佈局的基石角色。 float 最初的設計目標是為了實現文字環繞圖片image的「文繞圖」效果，如同報紙或雜誌的排版。

瞭解如何使用 CSS 建立響應式浮動元素。 提示： 在我們的 CSS 浮動 教程中瞭解更多關於浮動的資訊。 跟蹤您的進度 - 免費！

將想要有「浮動側欄動態選單」的網頁或文章，從「撰寫」模式（預設）切換到「HTML」模式，並在文章最前方貼入以下內容：