こんにちは、mito(@mito_works)です!
今回は、jQueryとCSSだけでハンバーガーメニューを作りたいと思います。
HTMLでの記載
CSSでの記載
ハンバーガーメニュー表示の制御です。
以下のようなハンバーガーメニューを作りました。

momo
header navのところで、top -800pxとしているので、このままでは実際には見えない状態だよ。
jQueryでの記載
mito
jQueryではハンバーガーメニューの三本線をクリック時に×に変形させたいので、指定した要素にアクションと連動させて名前を付けたり消したりする処理を書いています。
.toggleClassメソッド
POINT!!
指定した要素に指定したクラス名を付けたり消したりできる。
clickファンクションで使うと、クリックするたびにクラス名を付けたり消したりできる。
momo
今回はクリックに連動させて、headerに .openNav を付加・削除しているよ!
再びCSSの記載(メディアクエリの設定)
画面横幅が768px以下の場合の設置を記載します。
- ハンバーガーメニューのメニュー内容の表示制御
- クリック時に横棒を45度傾け×にする処理
- ハンバーガーメニューが表示されるようにする
- ハンバーガーメニューのメニュー内容が表示されるようにする
ハンバーガーメニューが表示され、クリックするとメニュー内容が表示されます。

こちらを参考にさせていただきました。
ーEndー
ABOUT ME