CSS 筆記 - 金魚系列 13 - 動態收闔側邊選單

延續金魚系列 12 側邊選單的加強版，加上可以收闔的功能，很多介面都會使用到，不管是前台還是後台。

學習重點

金魚都能懂的這個網頁畫面怎麼切 : 側邊選單怎麼切
flex 教學
:checked 原理說明（文字）
:checked 選取器（影片）
使用 absolute + margin auto 來達到 CSS 垂直置中效果
RWD 選單製作教學

HTML 架構

新增了兩個元素，一個為 checkbox，另一個為 label，label 是對應 input 可以使用的標籤。

使用 checkbox 來做開關。
label 寫在 nav 下方是為了比較好看到。

<input type="checkbox" name="" id="sideMenu-active" />

<div class="sideMenu">
  <form>
    <input type="search" placeholder="請輸入搜尋名稱" />
    <button><i class="fas fa-search"></i></button>
  </form>
  <nav>
    <a href="#"><i class="fas fa-sitemap"></i>金魚系列 VII</a>
    <a href="#"><i class="fas fa-chalkboard"></i>側邊選單</a>
    <a href="#"><i class="fas fa-book-reader"></i>非常常見</a>
    <a href="#"><i class="fas fa-user-graduate"></i>不會不行</a>
    <a href="#"><i class="fas fa-trophy"></i>切了就會</a>
  </nav>
  <label for="sideMenu-active">
    <i class="fas fa-angle-right"></i>
  </label>
</div>

CSS 樣式

有新增的收合效果記錄一下。

label 設定

也就新增收合選單右邊凸出來的按鈕圖示，

label {
  width: 20px;
  height: 80px;
  background-color: #d1d1d1;
  color: #686666;
  position: absolute; // 絕對定位在 sideMenu 上
  right: -20px;
  top: 0; //絕對定位垂直置中的技巧
  bottom: 0; //絕對定位垂直置中的技巧
  margin: auto;
  line-height: 80px;
  text-align: center;
  border-radius: 0 5px 5px 0;
  box-shadow: 5px 0 5px rgba(23, 23, 54, 0.6);
}

checkbox 設定

因為這個頁面只有一個側欄開關，故直接在 input 綁定一個 id 來控制它。

當我點擊 sideMenu 時，checkbox 的狀態變為 checked 的時候，讓側邊選單出現。
使 label 裡的圖案橫向反轉。

#sideMenu-active:checked + .sideMenu {
  transform: translateX(0);
  label .fas {
    transform: scaleX(-1);
  }
}

將 input 絕對定位在 body 上，就不會佔空間，會貼其左上角。
使 checkbox 變透明。
不要讓該功能還選得到，可將其排序往後跳。

#sideMenu-active {
  position: absolute;
  opacity: 0;
  z-index: -1;

最後在 .sideMenu 加上 transition 後，就完成收合式選單囉!

label 相對定位在 .sideMenu。
transform: translateX(-100%); 將 .sideMenu 左橫移 100%，使之到螢幕外。
transition: 0.5s; 側邊選單收合的時間差。

.sideMenu {
  width: 300px;
  height: 100%;
  background-color: #ff7575;
  border-right: 3px solid #d1d1d1;
  display: flex;
  flex-direction: column; //主軸
  padding: 50px 0;
  box-shadow: 5px 0 5px rgba(23, 23, 54, 0.6);
  position: relative;
  transform: translateX(-100%);
  transition: 0.5s;

CodePen https://codepen.io/hnzxewqw/full/NWxmjMo

參考資料

金魚都能懂的這個網頁畫面怎麼切 : 動態收合式側邊選單

提姆寫程式