2020年1月22日いつもコピペで実装していた、ハンバーガーメニュー。コピペって便利だけど、いざカスタマイズしようと思った時、仕組みを理解していないと対処が難しい場合があります。そんな場合を想定して、よくあるUIの一つ、ハンバーガーメニューをJavaScriptで実装してみました。ドットインストールの「JavaScriptでハンバーガーメニューを作ろう」を参考にしました。CodePen.早速ですが完成版のdemoはこちらです。右上にあるハンバーガーアイコンをクリックすると、右側からメニューが表示されます。スマホ表示だけでなく、PC画面でもよく使われるUIですね。これを応用して、モーダル表示にしたり、上部から表示させるようにしたり色々使えるようになるはずです。それでは解説していきましょう。HTML/CSSのパーツHTMLのパーツは以下の3つメニュー展開時の背景ハンバーガーアイコンメニュー本体メニュー展開時の背景メニューを目立たせるために、メニュー以外の部分には黒の透過背景を被せています。display:none;}widthとheightを100%にして、絶対配置し、z-indexで表示順を指定しておきます。デフォルトでは非表示なので、display:none;とするのを忘れずに。ハンバーガーアイコンクリックするとメニューが展開するトリガーとなる、ハンバーガーアイコンです。spanタグでスタイリングすることが多いみたいですが、ドットインストールではfontawesomeを使用していました。cursor:pointer;}右側に寄せて、カーソルを変更しておきます。次に出てくる、hideのアイコンも一緒にスタイルを当てておきます。右側からスライドしてくるメニューの本体部分のマークアップです。}}こちらもposition:absolute;で右上に絶対配置にしておき、右側から表示させたいので、rightをwidthの数値分マイナスにしておきます。黒背景の上に表示させたいのでz-indexを2にしています。JavaScriptでクラス付与してアニメーションいわゆるDOM操作ですが、その準備段階としてbodyタグに対してスタイリングをしておく必要があります。}}overflow-xとoverflow-yは、横や縦にスクロールが発生しないように固定するスタイリングです。メニューにright-180pxを指定しているため、右側にスクロールが発生してしまうためです。bodyタグに対して、.menu-openというクラスを付与することで、#coverと#menuのcssを変化させます。.menu-openクラスを付与は、JavaScriptで指定していきましょう。});})();JavaScriptの説明は、コメントしてある通りですが、showをクリックした時に、bodyに,menu-openをつけることでメニューを表示させることができます。これだけなら、JavaScriptで書いても簡単に実装することができますね。JavaScriptは難しい。jQueryじゃないとなんだかやりにくいって思っている人でも、一つずつ噛み砕いていけば理解できるかもしれませんね。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。