HTML / CSS筆記 | 用 CSS 手刻 RWD 導覽列

RWD 導覽列

之前第一次看到這元件時覺得好酷（？，在平板或是手機尺寸就直接變成三條線的漢堡選單，然後原先的導覽項目都被縮合至漢堡選單了，以前不會寫，就直接拿 bootstrap 套件套一套，輕鬆了事！

但當要做比較客製化的導覽列時，套件會很難改，甚至花一堆時間只是要改一個顏色或是樣式而已，所以這次就來看看，不用套件要如何做出 RWD 的導覽列 ( navigation )，原本以為要用 Javascript 去寫，然後在看 YT 教學時，竟然看到有人可以用 HTML + CSS 就做出來了！

直接現學現賣，把操作步驟寫下來，以後就不用從頭理解

---

1. 步驟一：先把導覽列的HTML架構分出來

主要分成以下三塊，並用 flexbox 把大致上的排版排出來
( 如果排不出來沒關係，最下面有附完整的 codepen，可以查看 html 和 css )

• logo 區
• checkbox 和 menu 選單區( 很重要，一定要寫 )：用 <input> 和 <label> 標籤，<input> 標籤的 type 屬性要改成 checkbox、<label> 標籤因為還沒做任何事也沒有文字，所以在畫面上看不到是正常的
• nav 導覽項目區

checkbox 和 menu 選單區一定要寫在 nav 導覽項目區前面，否則會導致無法觸發

2. 步驟二：製作 menu 選單

剛剛只有寫出 <label> 標籤，現在就來幫 <label> 標籤做出 menu 選單的樣式，先給 <label> 觸發的寬高大小 ( e.g. 48px )，並且記得給相對定位

然後用偽元素 ::before 來製作三條線，先用 background–color 給予線的顏色，並用 width 和 height 來定義線的長度和粗細，接著用 box-shadow 的垂直偏移屬性來複製出上下兩條線 ( 好神奇！ )，記得模糊度寫 0px，並且記得給絕對定位

box-shadow 語法：box-shadow: [水平偏移] [垂直偏移] [模糊度] [顏色];

3. 步驟三：將 checkbox 與 menu 選單做關聯

將 <input> 標籤寫上 id 名稱，並且 <label> 標籤的 for 要跟 <input> 的 id 名稱一樣，這樣按下 menu 選單就可以因為有這層關聯的關係，讓 checkbox 被勾選了！

關聯後的效果如下：

4. 步驟四：隱藏 checkbox 與 menu 選單

check 與 menu 選單關聯做完後，就可以先將它們隱藏了，等到要做 RWD 的平板或是手機尺寸時才會用到它們

5. 步驟五：改變 nav 導覽項目排版

開始做 RWD，當螢幕小於 768px，用 @media 、 position 、 flexbox 等 css 語法來將 nav 導覽項目從原本橫向排版改成直向排版，並調整位置和稍微修改樣式

6. 步驟六：顯示 menu 選單

當螢幕小於 768px，這時menu 選單就可以出現了，用 @media 、 display: block 來顯示 menu 選單

checkbox 就不需要顯示了，一直隱藏

7. 步驟七：觸發 nav 導覽項目由右向左滑出 ( 關鍵步驟！！)

這步驟是關鍵！！也是比較難理解的地方，它的原理是透過按 menu 選單後，導致被隱藏的 checkbox 狀態變成 checked ( 已勾選 )，然後我們去寫當 checkbox 變成 checked 時要去觸發 nav 導覽項目從原本右邊外側由右向左滑入

先將 nav 導覽選單寫上 right: -100% 移到外面，然後在 checkbox 寫上 #menu_control: checked ~ .nav { right: 0px; } ，它代表當 checkbox 變成 checked 時，會觸發後面的 .nav 元素去改變它的樣式，代表 .nav 元素的 right 從原本的 -100% 變成 0 ( 即從右側向左滑進來 )

.nav 最好加上過渡的特效 transition: right 0.8s ease-in-out; ，這樣當 .nav 會從右邊慢慢滑進來，才不會導致 nav 導覽選單出現時太突兀

8. 步驟八：移除多餘的 scroll bar

由於在按下 menu 選單前，我們把 nav 導覽項目放到螢幕最右側 ( 即 right: -100% )，所以會導致出現 scroll bar 的問題，所以記得在 body 上加上 overflow: hidden ，這樣就可以把多餘的地方截掉了，也就不會有 scroll bar

切任何版型前，記得所有元素都要加上 box-sizing: border-box; ( 元素整體大小=元素＋padding＋border )

---

以上，就完成囉！

來看看成品如何

也附上 codepen：

---

參考：
https://www.youtube.com/watch?v=E9SosNZkX7Y&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=22&ab_channel=CSScoke