ハンバーガーメニューの作り方【JavaScript】

※自分用備忘録

コード例です。

JavaScriptにはいろいろな記述の仕方があるため、最適な記述ではない場合があります。

ハンバーガーボタンを作成

HTML

<div id="menuBtn">
 <div></div>
 <div></div>
　　<div></div>
</div>

CSS

#menuBtn {
 margin-left: auto;
 width: 50px;
 height: 50px;
 background-color: #777;
 position: relative;
}

#menuBtn div {
 height: 1px;
 width: 60%;
 background: #333;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, 0);
 transition: 0.3s;
}

#menuBtn div:nth-of-type(1) {
 transform: translate(-50%, -10px);
}

#menuBtn div:nth-of-type(3) {
 transform: translate(-50%, 10px);
}

JSでtoggleを設定

JavaScript

document.addEventListener('DOMContentLoaded', function() {

});

上記のコードにはHTMLを読み込んだ後にJSを動かすという意味があります。
記述しなくても機能しますが、記述しておくとエラー回避につながる場合があります。

以降のコードはこの中に記述していきます。

JavaScript

document.getElementById("menuBtn").addEventListener("click",function() {
  this.classList.toggle("active");
})

classから取得してtoggle用のclassを設定することもできますが、idは基本的に一つのページに同じidが存在しないので、idで取得した方が処理的に早い場合があります。

ハンバーガーメニューをクリックしてclassのactiveを付与したときの設定

HTML

<nav id="nav">
  <ul id="ul">
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
  </ul>
</nav>

CSS

#menuBtn.active div:nth-of-type(2) {
 opacity: 0;
}

#menuBtn.active div:nth-of-type(1) {
 transform: rotate(45deg) translate(-50%, 0);
 transform-origin: 0% 50%;
}

#menuBtn.active div:nth-of-type(3) {
 transform: rotate(-45deg) translate(-50%, 0);
 transform-origin: 0% 50%;
}

#nav {
 opacity: 0;
 visibility: hidden;
 transition: .3s;
}

#nav.active {
 opacity: 1;
 visibility: visible;
}

navはdisplay: none;でも隠すことができますが、その場合いtransitionが効きません。

opacityで設定するとtransitionが効きます。
opacityを0にしただけではクリックができてしまうため、visibilityも一緒に設定する必要があります。

JavaScript

document.getElementById("nav").classList.toggle("active");

this.classList.toggle("active");の下に上記のコードを追加します。