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

この記事では,ハンバーガーメニューの作り方について紹介します.

ハンバーガーメニューと言っても,ハンバーガー屋のメニューのことではありません.

と〜げ

webサイトの幅を狭めると,ヘッダーのメニューが消えて,ハンバーガーのように三本線が現れて,これをクリックするとメニューが表示されるやつです.

↓↓↓↓↓↓↓↓↓↓↓

では,上のようなハンバーガーメニューを作っていきます.

と〜げ

すべてのファイル(html,css, jsファイル)に関しては,最後に貼っておきます.必要に応じてコピペしてください.

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

See the Pen
GLvVad
by Yoshitaka (@YOSHITAKA3)
on CodePen.


ポイント
  • PC幅のときは,ハンバーガー3本線(class=”humberger-wrap)は非表示
    SP(スマホ)幅のときは,ハンバーガ3本線(class=”humberger-wrap)を表示,ヘッダーメニュ(nav)ーを非表示させます.
  • jQueryで,ハンバーガー3本線(.hunmberger-wrap)をクリックすると,ハンバーガ3本線(class=”humberger-wrap)と,ヘッダー(header)にopenedというクラスを追加する
  • ハンバーガー3本線をクリックしたときopenedクラスを利用して,cssで,3本線の変化やメニューの形を整える.
htmlファイル
cssファイル
javascriptファイル

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です