フリーランスの忘備録

// ---------------------------
// 大事な変数定義
// ---------------------------
$openClass:navOpen;
$nav_z-index:100;
$ease-time:.3s;

// ---------------------------
// 大事なstyle
// ---------------------------
#wrapper{
  // メニューオープン時の各style
  &.#{$openClass}{
    // メニューオープン時にコンテンツエリアがスクロールしないように position: fixed;
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    .nav{
      transform:translateY(0);
    }
    .memubtn{
      &:before{
        content:'close';
        color:#fff;
      }
    }
  }
}
.nav{
  position:fixed;
  z-index: $nav_z-index;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // スマホでのスクロールを滑らかにするためのstyle
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  overflow-y: auto;  
  transform: translateY(-100%); // ここはお好みで
  transition: $ease-time transform ease; // ここはお好みで  
  &-inner{
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    overflow-y:auto;
  }
}

// 今回はgooleのMaterial iconsを使用してmenubtnを作成
.memubtn{
  display: block;
  position:fixed;
  right: 15px;
  top: 10px;
  z-index: #{$nav_z-index+1};  //navのz-indexより大きく
  color:#000;
  &:before{
    content:'menu';
    font-family: 'Material Icons';
    font-size: 40px;
  }
}

// ---------------------------
// デザイン調整のためのstyle
// ---------------------------
img{
  width: 100%;
}
.head{
  height: 80px;
  .logo{
    text-align: center;
    height: 80px;
    line-height: 80px;
    font-size: 30px;
  }
}
.main{
  display: block;
  max-width:1230px;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto;
}

.nav{
  background-color: rgba(0,0,0,.8);
  &-inner{
    padding:40px 15px;
  }
}
.glnav{
  &-item{
    text-align: center;
    padding: 20px 0;
    a{
      color:#fff;
      font-size: 20px;      
    }
  }
}