[CSS] 手機版頁面 側邊選單

京都 花見小路

首頁

內容 圖文交錯

左側選單 

右側選單

來做一下手機版的網頁好了，想玩玩側邊 Menu。
頂部的橫幅選單

header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9;
  .top-bar {
    width: inherit;
    display: flex;
    justify-content: space-between; /*分散排列*/
    .icon {
      width: 30px;
      height: 30px;
    }
  }
}

中間內容大致上的設定

//內容版面
.container {
  padding-top: 50px;/* 保留頭部空間 */
  width: inherit;
  overflow: hidden;
  position: relative;/*基本設定*/
  .content {
    position: relative;/*基本設定*/
    background-color: inherit;
  }
}

左右選單主要設定

.right-menu, .left-menu {
  position: fixed;
  z-index: 9;
  top: 0;
  bottom:0;/* 讓選單高度到內容的最底 */
  overflow: auto;/* 捲軸顯示（重要） */
  width: 280px;
  background: #bbbbbb;
}

左邊往左推

.left-menu {
  top: 0;
  left: -280px;/* 擺在畫面外 */
  transform: translate3d(0,-50px,0);/* 設定位移動畫 */
  transition: all 500ms ease-in-out;/* 過場方式 */
}

右邊的話也是大同小異。

接下來是處理圖文交錯

section:nth-child(2n) {
  //處理 Safari - rotate3d支援問題
  -webkit-perspective: 400px;
  div{
    transform: rotate3d(0,1,0,180deg);
    //文字的部分再轉正
    .feed {
       -webkit-transform: rotate3d(0,1,0,180deg);
       -moz-transform: rotate3d(0,1,0,180deg);
       -o-transform: rotate3d(0,1,0,180deg);
       transform: rotate3d(0,1,0,180deg);
    }
  }
}

完成作品: mobile webpage - yoga paradise