9 練習

1 介面 hamburger icon

檔名建議：btn_hamburger.html

例如以下 apple 行動版官網，影片示意：

6MB

hamburger_icon_sample.mov

提供 html：

<button type="button" id="btn_hamburger"></button>

切換 class 的 JS 程式：

let btn_hamburger_el = document.getElementById("btn_hamburger");
btn_hamburger_el.addEventListener("click", function(){
  this.classList.toggle("-on")
});

參考作法：

2 導覽列縮合

檔名建議：nav_switch.html

提供 html：

<button type="button" id="btn_hamburger">導覽列縮合按鈕</button>

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

提供 JS：

var btn_switch = document.getElementById("btn_hamburger");
btn_switch.addEventListener("click", function(){
  var nav_el = document.getElementById("nav_block");
  nav_el.classList.toggle("-on");
});

參考作法：

漸進式的展開縮合，因為會用到 JS，單靠 CSS 無法做到，故同學學完 JS 之後，可再來研究：

3 內容圖片佔滿版及寬高比

檔名建議：aspect_ratio.html

提供 HTML 如下：

<div class="img_block">
  <img src="https://picsum.photos/id/867/2000/300">
</div>

• 當螢幕寬度小於等於 767.98px 以下時，圖片要在 div.img_block 區塊水平方向、垂直方向皆置中；且 div.img_block 需佔螢幕的滿版，且寬高比需是 2:1。

• 請參考下方 CodePen 的畫面結果，實作看看。

使用 aspect-ratio 來做一個元素的寬高比，例如寬高比 2:1 ：

div.block{
  width: 150px;
  aspect-ratio: 2 / 1; /* height 就會是 75px */
}

參考作法：

4 行動版呈現左右滑動

檔名建議：mobile_slide.html

提供 html 如下：

<div class="list_container">
  <ul class="ul_list">
    <li class="item">
      <div class="item_block">
        <h1>標題1</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題2</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題3</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題4</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題5</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題6</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題7</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題8</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題9</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題10</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
  </ul>
</div>

請直接參考下方 CodePen 的畫面結果，實作看看。

參考作法：

5 Youtube iframe 影片 RWD

檔名建議：youtube_iframe_rwd.html

提供以下 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>

執行完的結果示意：

參考作法：