【簡単！】ハンバーガメニューの作り方～アイコン作成編～
こんにちは～！最近ウーバーイーツでモスバーガー頼むのにハマってて着実に健康寿命削っているシュウヘイです。でもうまいからしゃーないってことで、無理やり導入を作ったところで、今回はハンバーガーメニューの作り方について解説していきます。
ハンバーガーメニューとは？？
ハンバーガーメニューとは下記図のような、三本線のアイコンで、アイコンをクリックするとメニューが表示されるといった、スマートフォン等画面幅の狭い際等に使用される表示方法である。作成方法は多くあるが、本記事では私がよく使う簡単な作り方を解説していく。
クリックすると・・・・
メニューが表示される
アイコンの作り方
本記事では、クリック時の動作は次回の記事で説明するとして、アイコンの作り方を解説する。超簡単なので、身構える必要はない。下記コードを参照していただきたい。class名iconという親要素の中に、三本線のもととなるclass名buns(パン)という子要素二つ、class名patty（具）という子要素を一つ用意する。各子要素に高さ(height)と背景色(background-color)を指定し、pattyの上と下に余白(margin)を指定すれば、ハンバーガーが完成。あとは、iconの配置をposition:absolute; position:relative;を使用してheaderの右上に配置すれば、ハンバーガーメニューのもととなるアイコンが完成する。 position:absolute; position:relative;の使い方は【position:absolute,relativeの使い方】で解説しているので、参照してください。
See the Pen by Shuhei Nishida (@shu0814) on CodePen.
これで大元となるアイコンが完成したので、次回javascriptを使用してアイコンをクリックした際に、バッテンにする方法を解説していきたいと思います。
↓これ！！
それでは、ありがとうございました！
ABOUT AUTHOR
シュウヘイ
フリーランスのマークアップエンジニアとしてweb制作を中心に活動
HTML,CSS,Wordpress,javascript,その他独学方法やWeb制作フリーランスの経験談について情報を発信しています。
