css

【簡単！】ハンバーガメニューの作り方～メニュー完成編～

公開日 2021/8/7 最終更新日 2021/8/25

こんにちは。コロナワクチンの副作用でグロッキー状態のシュウヘイです。今はひいたけど熱も39度くらい出て、めっちゃきつかった～てか、こんな高熱出たのいつぶりだろう。。。。

雨にも負けず、風にも負けず、ワクチンの副作用にも負けず今日も頑張っていきましょ～ついに今日はハンバーガメニュー完成編です。前回までの記事でアイコンは完成しましたね。まだ見てない方はぜひ参照してください（ハンバーガメニューの作り方）。

前回まで、下記のような状態まで制作した。残り３ステップでアイコンをクリックした時に、メニューを表示させていく。なお、メニューの表示させ方にはさまざまな種類があるが、今回は私が最もシンプルだと感じる画面外からにゅるっと表示するメニューを作成していく。

See the Pen by Shuhei Nishida (@shu0814) on CodePen.

ステップ①：メニューを作成。

ステップ②：作成したメニューを画面外へ移動。

ステップ③：アイコンをクリックした時に、メニューにクラスを追加して画面内へ戻す。

それでは、順を追って解説していく。

contents

ステップ①：メニュを作成。

header要素内にメニューを作成していきます。ここで、特筆することは特にないが、メニューは右から出現するようにするため、position:absolute;でheader要素内の右側に表示する。

See the Pen by Shuhei Nishida (@shu0814) on CodePen.

ステップ②：作成したメニューを画面外へ移動。

次に一度、メニューを画面外へ移動させる。ここでは、まずメニューの大元のheader-nav要素の、横幅を設定(width:300px)し、それが完全に画面外に移動されるようにtransformプロパティを指定する。ここでは、横幅300pxに対し、500pxの移動を適用している。また、cssファイルのbody要素に着目していただきたいが、ここでメニューを横移動させた分、body要素の横幅が広がっても横スクロールされないよう、overflow-x: hidden;を指定している。これで、完全にメニューが画面外へ移動し、画面内に表示されなくなった。

See the Pen by Shuhei Nishida (@shu0814) on CodePen.

ステップ③：アイコンをクリックした時に、メニューにクラスを追加して画面内へ戻す。

ここまで、完成したらあとは簡単である。アイコンを作成した際に使用した、jQueryのtoggleClassを使用して、アイコンがクリックされたときに、header-navクラスの要素に、横移動のプロパティを外したクラスを追加すればよい。下記コードでは、まずjsファイルに、【$(“.header-nav”).toggleClass(‘nav-active’);】を追記している。これは、【$(“.icon”).click(function()】iconクラスの要素がクリックされたときに、【$(“.header-nav”).toggleClass(‘nav-active’);】header-navクラスの要素に【 nav-active’ 】というクラスを付け外しする。という記述である。そして、cssファイルに先ほどの【 nav-active’ 】クラスへ、横移動なしのプロパティを追記している。こうすることで、アイコンがクリックされるごとに、header-navクラスの要素にnav-activeクラスが付け外しされ、画面外からメニューがにゅるっと表示される。

See the Pen by Shuhei Nishida (@shu0814) on CodePen.

ハンバーガーメニュー完成！！

これで、ハンバーガーメニューが完成しました。あとは、メニューのデザインをそれっぽく変更すれば、いい感じのハンバーガーメニューになります。一番肝になってくるのが、jQueryのクラスのtoggleClassでクラスの付け外しをしている点です。これを使えば、ハンバーガーメニュー以外にも様々なところで使える汎用性の高いものなので是非覚えていただきたいです。

お疲れさまでしたっ！