初心者向け。ハンバーガーメニューをjQueryで簡単に作る方法
1935 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
今回はjQueryのハンバーガーメニューの解説をします。
初めて実装する場合はまずコピペで実装することをお勧めします。
コードの理解はjQueryにある程度慣れてからがいいと思います。
ハンバーガーメニューの実装方法
完成形のコードは↓になります。
ハンバーガーメニューの中身の作成
まずはハンバーガーメニューの中身から作ります。
5行目〜13行目がハンバーガーメニューの中身で最初は非表示にしないといけないので69行目があります。
ハンバーガーメニューを開いた時に画面いっぱいに使うのと画面スクロールせず固定させたいために70行目〜74行目があります。
77行目〜80行目はハンバーガーメニューの背景色を黒にして画面いっぱいに使うためにあります。
80行目はハンバーガーメニューを開いた時の中身が元々あった内容の上に来るようにするための記述です。
84行目〜87行目はハンバーガーメニューの中身のテキストが縦方向横方向の中央に来るようにするためにあります。
ハンバーガーメニューのアイコンの作成
次はハンバーガーメニューのクリックする部分（3本の横線）を作ります。
29行目〜33行目はハンバーガーメニューのサイズを作っています。
33行目のz-indexはハンバーガーメニューを開いた時に閉じるためのXボタンを表示させますが背景の下に隠れないようにするためにあります。
背景のz-indexは80行目にありz-indexは2ですがこれより大きくするので3にしています。
35行目〜53行目はハンバーガーメニューの線の位置、線の長さ、線の太さが書いてあります。
54行目〜67行目はハンバーガーメニューをクリックした時にどう変化するか（Xになる）です。
最後はjQuery
これでハンバーガーメニューができたのでクリックした時に中身が表示されるようにしますがそれをjQueryで行いそれが103行目〜108行目です。
103行目がハンバーガーメニューをクリックした時にXマークに変えるための記述で104行目がハンバーガーメニューの中身を表示するための記述です。
これで完成です。