功能說明

  1. 開合按鈕
  2. 側邊欄 :
    • 標題
    • 選單連結
    • 社群媒體
    • 關閉按鈕

CSS重點

  • .sidebar中控制了sidebar的屬性，並讓其呈現關閉模式 : 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /*Navbar*/
    ...
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--clr-white);
      display: grid;
      grid-template-rows: auto 1fr auto;
      row-gap: 1rem;
      box-shadow: var(--clr-red-dark);
      transition: var(--transition);
      transform: translate(-100%); /* 用此屬性控制縮放 */
    }
    ...
  • 但.show-sidebar卻改變transform屬性，讓其呈現開啟模式 : 
    1
    2
    3
    4
    5
    6
    /*Navbar*/
    ...
    .show-sidebar {
      transform: translate(0);
    }
    ...
  • 結論 :
    只要在HTML的aside標籤中加入show-sidebar的Class，就能開啟sidebar；反之，只要移除show-sidebar，就能關閉sidebar

HTML重點

  1. 開合按鈕 : 

    1
    2
    3
    4
    <button class="sidebar-toggle">
        <!-- 使用Font Awesome的Icon -->
        <i class="fas fa-bars"></i>
    </button>

    將開合按鈕的Class設為sidebar-toggle

  2. Sidebar表頭 : 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="sidebar-header">
        <!-- 匯入標題圖片 -->
        <img src="logo.svg" class="logo" alt="" />
        
        <!-- 關閉按鈕 -->
        <button class="close-btn">
            <i class="fas fa-times"></i>
        </button>
      </div>

    將關閉按鈕的Class設為sclose-btn

JavaScript重點

  1. 利用class="sidebar-toggle"去抓取開合按鈕 
    1
    const toggleBtn = document.querySelector(".sidebar-toggle");
  2. 利用class="close-btn"去抓取關閉連結 
    1
    const closeBtn = document.querySelector(".close-btn");
  3. 利用class="sidebar"去抓取整個aside元素 
    1
    const sidebar = document.querySelector(".sidebar");
  4. 將開合按鈕新增點擊事件，進而讓sidebar可以開合 
    1
    2
    3
    toggleBtn.addEventListener("click", function () {
      sidebar.classList.toggle("show-sidebar");
    });

    classList.toggle在上篇文章已有說明

  5. 將關閉按鈕新增點擊事件，進而讓sidebar可以關閉 
    1
    2
    3
    closeBtn.addEventListener("click", function () {
      sidebar.classList.remove("show-sidebar");
    });

    classList.remove在上篇文章已有說明

參考與引用來源

  1. ClassList與其屬性介紹
  2. CSS transform 屬性介紹