トップへ戻る
BLOGS

ハンバーガーメニューの作成②

ハンバーガーメニューの作成②

さて前回の続きで今回もハンバーガーメニューの制作方法をやっていきます。前回でJSを使用しクラスを付与するところまで出来たので今回はもう少し微調整を、、

.menuButton.active div:nth-of-type(2) {
  /* バツが消える演出 */
  opacity: 0;
  transform: translate(-80%,-50%);
}

真ん中の線に対し横へ抜ける演出です。

ほかにもメニューが現れる際に全体にマスクをかけてナビメニューに注目してもらえるようにしましょう。

<div class="mask" id="mask"></div>

まずマスクとなるタグを用意します。

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 1;
  opacity:0;
  visibility: hidden;
  transition: .3s;
}
.mask.active {
  opacity: 0.5;
  visibility: visible;
}

そしてこれにもopacity: 0.5; visibility: visible;でクラスが付与された際に現れるようにしておきます。

次はJSですね。

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("menuButton").addEventListener("click", function() {
    this.classList.toggle("active");
    document.getElementById("nav").classList.toggle("active");
    document.getElementById("mask").classList.toggle("active");
  })
});

document.getElementById(“mask”).classList.toggle(“active”);

の1行を追加しました。これでメニューボタンをクリックした際にクラスのスイッチングができました。

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA