WEBマスター

jQueryで『ハンバーガーメニュー』を作ろう！

 
もくじ
  1. ハンバーガーメニューとは
  2. ハンバーガーメニューのサンプルコード
  3. ハンバーガーメニューの解説
  4. HTML内に全て記述した場合
  5. まとめ

ハンバーガーメニューとは

村長
村長
さっそく、「ハンバーガーメニュー」を作りましょう♪
新人
新人
「ハンバーガーメニュー」とは、何でしょう？
村長
村長
「ハンバーガーメニュー」は、三本線のナビゲーションメニューの事です。
デモを用意しましたので、そちらで確認をお願いします！
新人
新人
分かりました！
「ハンバーガーメニュー」デモ

ハンバーガーメニューのサンプルコード

村長
村長
「HTML」「CSS」「JS」ファイルにそれぞれ記述して、後ほど詳しく解説します。
新人
新人
よろしくお願いします！

HTML

jQuery（JS）

CSS

ハンバーガーメニューの解説

メニューオープン

村長
村長
まず、HTMLに記述してある上記のクラス名「menubtn」は、三本線の部分になります。
村長
村長
三本線の部分がクリックされたら、上記のナビメニューの部分が出てくるようになっています。
村長
村長
続いて、JSファイルの記述を見てみましょう♪
メニューオープンの部分は、クラス名「menubtn」がクリックされたら、id名「menu」に、クラス名「togmenu」の追加や削除を行うという指示が記述されています。
新人
新人
「toggleClass」は、どういう意味があるのでしょう？
村長
村長
「toggleClass」は、指定したCSSクラス名の削除や追加を交互に行うという指示です。
新人
新人
一石二鳥で便利ですね！
村長
村長
そうなんです！
三本線をクリックすると「togmenu」というクラス名が消えるはずです！
「×」をクリックすると、また復活します♪
村長
村長
続いて、CSSです。
上記の記述は、クラス名「togmenu」を非表示にしています。
新人
新人
だから最初は見えていないんですね！
村長
村長
そうです！
三本線をクリックすると、クラス名「togmenu」が削除され、CSSの非表示が解除されるという仕組みです。
新人
新人
なるほど！

メニュークローズ

村長
村長
メニュークローズも同じように「toggleClass」で、CSSのクラスを追加または削除を指示しています。
これは、三本線と×の画像が入れ替わるように設定しています。
村長
村長
三本線と×の画像は、CSSで記述しています。
新人
新人
それで画像が入れ替わって見えるんですね！

メニュー順表示

村長
村長
上記の記述は、「メニューが開かれたら、上から順にふわっとメニューリストが現れる」という指示です。
新人
新人
なるほど！

メニューリストクリックで閉じる

村長
村長
この記述は、同じページ内にリンクを飛ばした際に付け足したものです。
「メニューリストのリンクをクリックしたら、メニューを非表示にして、三本線の画像に戻す」という指示です。
新人
新人
「removeClass」とは、何でしょうか？
村長
村長
「removeClass」とは、付与されたクラスを削除するという指示です。
新人
新人
なるほど！

HTML内に全て記述した場合

村長
村長
HTMLに全て記述すると、下記のようになります。
<body>～</body>内に記述します。
新人
新人
長くなってしまいますね。
村長
村長
そうなんです！
なので、出来るだけ外部ファイルを作成して、読み込むようにしましょう！
読み込み方が分からないという方は、下記ページを参考にしてみてください♪
【初心者向け】CSSの基本を学ぶ
『Javascript』を覚えよう！

まとめ

新人
新人
『ハンバーガーメニュー』が出来ました!!
村長
村長
お疲れ様でした！
では『WEBマスター トップページ』に戻りましょう♪
新人
新人
はい！
『WEBマスター トップページ』に戻る
関連記事