ケーキハウス進化系( RWD編② )

三本ラインのメニューを表示させます。
今回は、fontawesomeを使って、表示させる方法を採用しています。

▶　fontawesome
Font Awesomeのチートシートの中から、メニューアイコンとして使うコードを確認します。
https://fontawesome.com/cheatsheet

フォントを使えるように、CDNを読み込みます。チェックボックスを利用して、メニューボタンを作ります。:checked 疑似クラスを利用して、ユーザーにチェックボックスの状態に基づいたコンテンツの切り替えをする。
参考サイトは、こちら https://developer.mozilla.org/ja/docs/Web/CSS/:checked*/

ハンバーガーメニュー
https://fontawesome.com/icons/bars?style=solid

---

CSS

/* トグルボタン 解説は以下を参考
https://developer.mozilla.org/ja/docs/Web/CSS/:checked*/

#togglenav {
  display: none; }
  #togglenav:checked + .togglenav-btn {
    background-color: #FF0087;
}
  #togglenav:checked + .togglenav-btn:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f00d";
    font-weight: 900;
    font-size: 2em; }
  #togglenav:checked ~ .togglenav-bg {
    pointer-events: auto;
    background-color: rgba(0, 0, 0, 0.3); }

.togglenav-btn {
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 50px;
  height: 50px;
  color: #fff;
  background-color: #FF0087;
  line-height: 50px;
  text-align: center;
  transition: background-color .6s, transform .6s;/*変化にかける時間3秒*/ }

  .togglenav-btn:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f0c9";
    font-weight: 900;
    font-size: 2em; }


/* トグルを押した際の背景 */
.togglenav-bg {
  cursor: pointer;
  position: fixed;
  top: 0px;
  right: 0px;
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: background-color .6s; }



/* ドロワーメニュー */
.drawer {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background-color: white;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform .4s;
  transition: transform .4s; }

    .drawer .drawer-menu .drawer-menu-item {
      font-size: 14px; }
      .drawer .drawer-menu .drawer-menu-item a {
        display: block;
        padding: 1em 2em;
        text-decoration: none;
        transition: background-color 0.4s;
        cursor: pointer;
        color: #333; }
        .drawer .drawer-menu .drawer-menu-item a:hover {
          background-color: #eee;
          color: #666; }
        .drawer .drawer-menu .drawer-menu-item a:before {
          font-family: 'Font Awesome 5 Free';
          content: "\f105";
          font-weight: 900;
          font-size: 1em;
          margin: 0 0.5em 0 0; }

#togglenav:checked ~ .drawer {
  -webkit-transform: translateX(0);
  transform: translateX(0); }

上から出現させることも可能です。transform:translate()は、移動距離を指定します。

 transform: translateY(-100%)/* transform: translateY*は、垂直での方向*/
 transition: transform .4s;/*transformは、変化にかかる時間です。４秒*/

仕上がりサンプルを見る
http://cocohp.com/menu/001/font_awesome/