• 範例1→ .aside滑入main跟著移動不會被遮蓋住
• 範例2(自我練習)→ .aside滑入main在原地不動

步驟
如果依DAY17 滑動導航效果 offcanvas 的方式架構HTML，到了動態執行jQuery會不好處裡。所以這邊就先把區塊分為container、aside、main

• 先依順序把html架構好(桌機→768px以下-平板+手機)
  • container包覆著.aside、main

<div class="wrap">
    <div class="container">
      <div class="aside">...</div>
      <div class="main">...</div>
        <div class="content">...</div>
    </div>
</div>

環境: 以768px為桌機與平板的斷點。從768px以上開始架構

• .aside隱藏
  • 設定.container與.aside的絕對相對位置，讓.aside追隨container
  • .container設定x軸 0以外的元素皆隱藏 ，.aside設定寬度，並往左移一個aside區塊的寬度，在.container中隱藏
  • .aside使用 transform(css3語法)網頁效能會比margin 、top、left好

.container{
    position:relative;
/*.container x軸0以外的元素皆隱藏*/
    transform:translateX(0);
    overflow:hidden;
}
.aside{
  position:absolute;
    width: 270px; /*寬度可自訂*/
    transform:translateX(-270px);
/*填入.aside寬度，填負數往左移一個aside寬度。得以隱藏是因上方.container設定*/
}

環境: 768px以下架構

• .aside顯示，.main中的.menu隱藏
  • .aside從上方設定的-270滑入0的位置，顯示於.container上方
  • .main中的.menu使用max-hight:0; overflow: hidden; 隱藏
• 設定完後，在使用jQuery執行動態就可有按下menu按鈕，aside從左方滑入效果。

※註 :可參閱做法相似的DAY17 滑動導航效果 offcanvas

/
transform 屬性功能
可對元素進行旋轉、縮放、移動或傾斜。

transform 屬性參考文章
MDN web docs- transform
W3school- CSS3 transform 屬性
CSS動畫-Transition、Animation、Transform的分析比較