css

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

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

こんばんは～前回は、超簡単なハンバーガーアイコンの作り方を紹介しました。この記事では、ハンバーガーメニュー完成に向けて、作成したアイコンに動きを付けていきます。↓動画のように、アイコンをクリックするとハンバーガーアイコンが、×になるやつ。

contents

ハンバーガアイコンに動きを付ける

下記３ステップで、ハンバーガーアイコンに動画のような動きを付けていく。

①JQueryで、アイコンをクリックした時にアイコンに新しいクラスを付与する。

②アイコンをクリックした時に付与されたクラスに、×のもととなるプロパティを指定する。

③クラスが付与され、三本線が×になる動きを滑らかにする。

各ステップについて順を追って解説する。

①JQueryで、アイコンをクリックした時に新しいクラスを追加する。

JQueryで、クリックした時に指定した要素に新しいクラスを付与したい場合は、下記JS内のようなコードを記述する。JQueryの具体的な記述方法については割愛させていただくが、ここでは『(‘.icon’)click(function)』つまり、『【icon】classの要素をクリックすると』、『$(this).addClass(‘active’)』つまり、『この(this)要素（icon）に【active】というクラスを追加する』という記述である。result画面のアイコンをクリックしてもらうと、三本線の背景色が赤色に変化する。これは、class名【icon】の要素に、【active】というclassが追加されることで、cssファイル内の、background-color: crimson;が適用されるようになるからである。

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

②アイコンをクリックした時に付与されたクラスに、×のもととなるプロパティを指定する。

JQueryでclass付与の方法が分かったところで、次は三本線を×にするプロパティを指定していく。きれいな×にするには少しコツがいるので、順に説明していく。

三本線のうち中央の線（patty）を消して、上下の線（buns）を中央に寄せる

まず、×を作るには三本線の線が一本必要ないため、中央の線（patty）をdisplay:none;で非表示にする。さらに、上の線(buns :nth-chile(1))を高さ分(7px)下に移動させる(transform: translateY(7px);)。アイコンをクリックすると、中央の線が消え、上の線が下の線と被さることで一本の線になったように表示される。

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

被さった二本の線を斜めに回転させる。

次に被さった上下の線をかぶせた状態で、各々斜めへと回転させる。

上の線(.buns:nth-child(1)) ・・・transform: translateY(7px) rotate(135deg);

下の線(.buns:nth-child(3))・・・transform: rotate(45deg);

アイコンをクリックすると、被さった状態のままそれぞれの線が、斜めへと回転するため×になる。

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

③クラスが付与され、三本線が×になる動きを滑らかにする。

ここまでで、ハンバーガアイコンを×にするところまで完成したが、動きが滑らかではないので滑らかに変化するプロパティ(transition)を指定する。また、jQueryでクラス付与(addClass)の記述をしていたが、toggleClassと記述することで、アイコンをクリックするごとにクラスの付け外しができるようになるので、そちらも変更する。

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

とりあえず、アイコンは完成

これで、とりあえずハンバーガアイコンは完成しました！この中で、使用したJQueryの記述や、cssプロパティは検索すれば出てくるので、分からないものがあったら調べてみてください。これらのプロパティを一つ一つ丁寧に覚えていけば、やっていることはすごく単純です。私自身最初にハンバーガーアイコンを作ろうとしたときにいろいろなやり方を調べてみたのですが、結局このやり方が簡単だなと思ったので、紹介させていただきました。もっと分かりやすくておしゃれな方法も是非教えていただきたいです。

次回は、アイコンをクリックした時のメニュー表示を解説していきたいと思います。

それではお疲れさまでした。