OffCanvas 的選單導覽，是行動版裝置常用的模式之一。這邊要來筆記下在不用 JavaScript 的前提下來達成這個效果。
核心原理
1. 開關是藉由 Checkbox Input 來執行
2. checkbox 的位置要放置在最前面，因為 CSS 選擇器是沒有辦法選取到該 checkbox 位置以上的 DOM 的
3. CSS 可設定 :checked 和沒有 :checked 時候的樣式，可藉此來調整開啟 / 關閉時的一些 CSS 屬性
4. 遮罩 Overlay 效果和選單本身的 <div>，可以透過 z-index 的堆疊和 position: absolute 來達成
5. 若你有需要使用 animation 的話，那麼 display: none 是不可以使用的。要使用 opacity 和 z-index 的變化來讓動畫效果可以出來
程式碼
參考資料
1. Pure CSS Off-canvas Bootstrap Navigation
按讚加入粉絲團
