5. 練習

1 hamburger icon 的外掛

官網

官方所提供的 css 在這。

自行挑選一個效果，學會套用。只需要看 Usage 的 1 ~ 4 點即可。

切換 class (使用 jQuery)：

$(function(){
  
  // hamburger icon 的切換
  $("button.hamburger").on("click", function(){
    $(this).toggleClass("is-active");
  });

});

參考作法：

2 Youtube iframe 影片 RWD

提供以下 iframe 影片，它的寬高比為 560:315，也就是 16:9。

<iframe height="315" width="560" class="test" src="https://www.youtube.com/embed/-RAdHJ-aquE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

執行完的結果示意：

參考作法：

3 關於圖片

頁面上的任何圖片，不管它在哪裡，或是螢幕的寬度是多少，都設定：

img{
  max-width: 100%;
}

一切都是為了希望在預設上，圖片不要超出父元素。

4 關於表格

5 導覽列縮合

提供 html：

<button type="button" class="btn_switch">導覽列縮合按鈕</button>

<nav class="main_nav">
  <ul class="nav_list">
    <li><a href="#">首頁</a></li>
    <li><a href="#">關於我們</a></li>
    <li><a href="#">分類頁</a></li>
  </ul>
</nav>

提供 jQuery 寫法：

$(function(){
  
  // 點擊按鈕，選單縮放
  $("button.btn_switch").on("click", function(){
    $("nav.main_nav").slideToggle();
  });
  
});

結果示意：

參考作法：

實作類似 Youtube 版型

建立 youtube_layout.html 來撰寫以下各步驟：

第一步：https://youtu.be/_WbrNB61JZ0

header 區域的高：60px。

側邊欄區域的寬：240px。

第二步：https://youtu.be/oRDd_HPAGNk

第三步：

第四步：https://youtu.be/EsNq1FjpD1s

• 寬度小於等於 767px 時，介面調整。

• 模擬漢堡按鈕，點擊後出現導覽列。

參考作法：

https://alldata.sgp1.digitaloceanspaces.com/sample/rwd_20250913.zip