ハンバーガーメニュー備忘録

今までLPばかりコーディングしていて、ハンバーガーメニューの作り方をすっかり忘れていた（ ;  ; ）
コーダー志望なのにハンバーガーメニューすら作れないなんて！！！て思ったりしたけど、よく考えてみたら書き続けてないと忘れちゃうし、、、備忘録作って頭でちゃんと理解＋後々見返せるようにしようとnote書きますよ！

覚えておくところ

・jQueryではjs-btnとheader__listにopenというクラスを付け外しする機能だけにする
・クラスopenにアニメーションをつけて開閉させる
・ページ内リンクをクリックした際にハンバーガーメニューが消えない問題は付与したopenクラスをremoveする作業をjQueryで行う

HTML完成形

<header class="header" id="top">
      <div class="header__inner">
        <h1 class="logo header__logo"><a href="index.html"><img src="img/logo.png" alt="ロゴ" /></a></h1>
        <nav>
          <ul class="header__list">
            <li class="header__list-item"><a href="#works">works</a></li>
            <li class="header__list-item"><a href="#skill">skill</a></li>
            <li class="header__list-item"><a href="#vision">vision</a></li>
            <li class="header__list-item"><a href="#about">about</a></li>
            <li class="header__list-item">
              <a href="https://note.com/chiaki_yayo">note</a>
            </li>
            <li class="header__list-item">
              <a href=""><i class="fa-brands fa-github"></i></a>
            </li>
            <li class="header__list-item">
              <a href="https://twitter.com/Chiakim18016950"
                ><i class="fa-brands fa-twitter"></i
              ></a>
            </li>
          </ul>
        </nav>
        <button type="button" class="btn js-btn">
          <span class="btn-line"></span>
        </button>
      </div>
    </header>

HTMLのポイントは、よくbuttonにspanを使って3本線作ることがあるがスッキリさせたかったので擬似要素で作る、というところ。
ちなみにツイッターとGitHubは font awesone を使っています。

CSS完成形(_btn.scss)

//color
$main-color: #eeece4;
$sub-color: #5e7b69;
$accent-color: #e6550c;
$hover-color: #e8a243;
/**************** ハンバーガーボタンのスタイリング ****************/
.btn {
  /* ボタンの配置位置  */
  position: fixed;
  top: 25px;
  right: 25px;
  /* 最前面に */
  z-index: 10;
  /* ボタンの大きさ  */
  width: 40px;
  height: 40px;
  @include m.pc {
    display: none;
  }
  @include m.tab {
    display: none;
  }
  @include m.media{
    display: none;
  }
}
/***** 真ん中のバーガー線 *****/
.btn-line {
  display: block;
  /* バーガー線の位置基準として設定 */
  position: relative;
  /* 線の長さと高さ */
  width: 100%;
  height: 4px;
  /* バーガー線の色 */
  background-color: #d6d5d5;
  transition: 0.2s;
}
/***** 上下のバーガー線 *****/
.btn-line::before,
.btn-line::after {
  content: "";
  /* 基準線と同じ大きさと色 */
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #d6d5d5;
  transition: 0.5s;
}
.btn-line::before {
  /* 上の線の位置 */
  transform: translateY(-16px);
}
.btn-line::after {
  /* 下の線の位置 */
  transform: translateY(16px);
}
/***** メニューオープン時 *****/
.btn-line.open {
  /* 真ん中の線を透明に */
  background-color: transparent;
}
.btn-line.open::before,
.btn-line.open::after {
  content: "";
  background-color: #fff;
  transition: 0.2s;
}
.btn-line.open::before {
  /* 上の線を傾ける */
  transform: rotate(45deg);
}
.btn-line.open::after {
  /* 上の線を傾ける */
  transform: rotate(-45deg);
}
/**************** ここまで、ハンバーガーボタンのスタイリング ****************/

パーシャルを使ってボタンだけ管理している。

CSS完成形(_header.scss)

//color
$main-color: #eeece4;
$sub-color: #5e7b69;
$accent-color: #e6550c;
$hover-color: #e8a243;

.header {
  background-color: $sub-color;
  /*padding: 33px 0;*/
  position: sticky;
  height: 100px;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 3;
  color: #eeece4;
}
.header__logo {
  float: left;
  margin-left: 20px;
  @include m.tab {
    margin-left: 50px;
  }
  @include m.sp{
    width: 18%;
  }
}
.header__inner {
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
}
.header__list {
  font-family: "raleway";
  align-items: center;
  float: right;
  margin: 30px 0;
  @include m.tab {
    width: 45%;
  }
  @include m.sp {
    position: fixed;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color:$sub-color;
    color: #efefef;
    transition: 0.3s;
    padding: 40% 0;
    margin: 0;
    float: inherit;
  }
}
//header__listにopenのクラスを付与する
.header__list.open {
  @include m.sp {
    right: 0;
    position: absolute;
  }
}
.header__list-item {
  margin-right: 30px;
  float: left;
  &:nth-last-child {
    margin-right: 0;
  }
  @include m.tab {
    margin-right: 5%;
  }
  @include m.sp {
    display: block;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    margin: 20px 0;
  }
}
h1 {
  width: 6%;
  padding: 10px 0;
  @include m.tab {
    width: 7%;
  }
  @include m.sp {
    width: 10%;
  }
}

header__list{right:-100vw;}

で横からフェードインで出てくるタイプのハンバーガーメニュー。

jQuery完成形

//ハンバーガーメニューをクリックするとopenのクラスが付与される
  $(function () {
    $('.js-btn').on('click', function () {        // js-btnクラスをクリックすると、
      $('.header__list , .btn-line').toggleClass('open'); // メニューとバーガーの線にopenクラスをつけ外しする
    })
  });

  //ハンバーガーメニュー内のリンクをクリックしたらページを閉じ、×ボタンは消す
  $(function () {
    $(".header__list-item a").on("click", function () {
        $(".header__list").removeClass("open");
        $(".btn-line").removeClass("open");
      
    });
});