HTML+SassはHambergurMenu（ハンバーガーメニュー）を実装します

/*色と最大幅を設定する*/
プライマリカラー: rgba(13,110,139,.75);
オーバーレイの色: rgba(24,39,51,.85);
最大幅: 980px;

/*テキストの色を設定します。背景色が明るい場合は黒に設定し、そうでない場合は白に設定します*/
@function テキストの色を設定する($color){
  @if(明度($color)>70){
    @return #333;
  }@それ以外{
    @return #fff;
  }
}

/*ミキサー、背景色とテキスト色を設定*/
@mixin 背景色を設定する($color){
  背景色: $color;
  色: テキストの色を設定します($color);
}

@import '_config';
*{
  マージン: 0;
  パディング: 0;
}

。容器{
  最大幅: $max-width;
  マージン: 0 自動;
}

/*ショーケースの背景色を設定し、疑似クラスを使用して背景画像を追加し、背景画像の z-index を -1 に設定します (画像が内部に表示されるようにします)。
次に、テキストを中央に表示するために、フレックスレイアウトを使用します*/
.ショーケース{
  位置: 相対的;
  高さ：100vh;
  背景色: $primary-color;
  ＆：前に{
    コンテンツ： '';
    位置: 絶対;
    左: 0;
    上: 0;
    幅: 100%;
    高さ: 100%;
    背景: url('../img/pexels-photo-533923.jpeg') 繰り返しなし 中央 中央 / カバー;
    Zインデックス: -1;
  }
  &-インナー{
    ディスプレイ: フレックス;
    高さ: 100%;
    flex-direction: 列;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    テキスト配置: 中央;
    色: #fff;
    フォントの太さ: 100;
    h1{
      フォントサイズ: 4rem;
      パディング: 1.2rem 0;
    }
    p{
      空白: 事前ラップ;
      フォントサイズ: 1.6rem;
      パディング: 0.85rem 0;
    }
    .btn{
      パディング: .65rem 1rem;
        /*ミキサーを使用して背景色とテキスト色を設定します*/
      @include 背景色を明るくします($primary-color,30%);
      境界線: なし;
      境界線: 1px 実線 $primary-color;
      境界線の半径: 5px;
      テキスト装飾: なし;
      アウトライン: なし;
      遷移: すべて .2s 緩和 .1s;
        /*ボタンにマウスを置いたときに、CSS3 スケールを使用してズーム効果を設定します*/
      &:ホバー{
        @include 背景色を明るくします($overlay-color,30%);
        境界線の色: 明るくする($overlay-color, 25%);
        変換: スケール(.98);
      }
    }
  }
}

/*原則: チェックボックスをクリックしてスタイルを変更します (チェックボックスの透明度を 0 に設定し、Z インデックスを高いレベルに設定します)。クリックするとメニューが表示されます。もう一度クリックするとメニューが消えます */
/*ショーケースが画面全体に表示されるように、メニューラップを固定に設定します。また、チェックボックスの不透明度を 0 に設定します。
また、ハンバーガーの Z インデックスが 1 に設定されているため、チェックボックスの Z インデックスを 2 に設定する必要があることに注意してください。そうしないと、クリックが機能しません */
.メニューラップ{
  位置: 固定;
  左: 0;
  上: 0;
  zインデックス: 1;
  。トグル{
    位置: 絶対;
    左: 0;
    上: 0;
    幅: 50px;
    高さ: 50px;
    不透明度: 0;
    zインデックス: 2;
    カーソル: ポインタ;
      /*チェックボックスがオンの場合、ハンバーガー内のdivと疑似クラスの回転効果を設定します*/
    &:チェック済み ~ .hamburger>div{
      変換: 回転(135度);
        /*擬似クラスは実際には225度回転しているので、topを0に設定する必要があります。そうしないと、❌の長さが不一致になります*/
      &:前、&:後{
        変換: 回転(90度);
        上: 0;
      }
    }

      /*チェックボックスが選択され、マウスオーバーされると、回転効果も設定されます*/
    &:checked:hover ~ .hamburger>div{
      変換: 回転(235度);
    }
    &:チェック済み ~ .menu{
      可視性: 可視;
      >div{
        変換: スケール(1);
        >div{
          不透明度: 1;
        }
      }
    }
  }
    
  。ハンバーガー{
    位置: 絶対;
    左: 0;
    上: 0;
    幅: 60ピクセル;
    高さ: 60px;
    パディング: 1rem;
    背景色: $primary-color;
    ボックスのサイズ: 境界線ボックス;
    ディスプレイ: フレックス;
    flex-direction: 列;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    テキスト配置: 中央;
    zインデックス: 1;
      /* div 自体は中央に水平線を生成し、配置を相対に設定し、疑似クラスを絶対に設定します。
      div に対するオフセット*/
    >div{
      位置: 相対的;
      左: 0;
      上: 0;
      幅: 100%;
      高さ: 2px;
      背景色: #fff;
      遷移: すべて .7 秒の緩和;
        /*疑似クラスを使用して、最初の水平線と 3 番目の水平線を生成します*/
      ＆：前に、
      ＆：後{
        コンテンツ： '';
        位置: 絶対;
        左: 0;
        上: -10px;
        幅: 100%;
        高さ: 2px;
        背景色: 継承;
      }
      ＆：後{
        上: 10px;
      }
    }
  }

    /*選択したメニューのスタイルを設定します*/
    /*メニューを固定に設定し、幅と高さを 100% に設定し、表示をフレックスに設定します。そうしないと、メニューが中央に表示されません。*/
  。メニュー{
    位置: 固定;
    左: 0;
    上: 0;
    幅: 100%;
    高さ: 100%;
    オーバーフロー: 非表示;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    visibility: hidden; /*メニューを非表示に設定し、チェックボックスが選択されたときに表示するように設定します*/
    遷移: すべて .75 秒の緩和;
    >div{
      背景色を設定します。
      幅：200vw;
      高さ：200vh;
      オーバーフロー: 非表示;
      境界線の半径: 50%;
      ディスプレイ: フレックス;
      コンテンツの中央揃え: 中央;
      アイテムの位置を中央揃えにします。
      テキスト配置: 中央;
      変換: スケール(0);
      遷移: すべて .4 秒の緩和;
      >div{
        最大幅: 90vw;
        最大高さ: 90vh;
        不透明度: 0;
        遷移: すべて .4 秒の緩和;
        >ul>li{
          リストスタイル: なし;
          フォントサイズ: 2rem;
          パディング: .85rem 0;
          テキスト変換:大文字;
          transform: skew(-5deg,-5deg) rotate(5deg);/*テキストの傾きを設定*/
          {
            色: 継承;
            テキスト装飾: なし;
            トランジション: color .4s イーズ;
          }
        }
      }
    }
  }
}