ハンバーガーメニューを簡単に作る方法（サンプルコード付き）

GoogleがレスポンシブWebデザインが推奨されてからしばらく経ちましたが、皆さんのWebサイトは、もう対応済みでしょうか？

まだレスポンシブ対応していないのであれば、今すぐ検討して下さい。
最近は、PCよりもスマホでネットをするユーザーが増えています。

スマホでネットをするのは若い人だけと思っていませんか？

通勤途中や職場でお昼休み、自宅でテレビを観ながら、ちょっとした調べものをする時、スマホで検索していないでしょうか？
実は、すでに若い人だけでなく、ほとんどの人はスマホを使ってネットの情報を検索しているのです。

そんな時代になってくると、スマートフォン対応をする上で、ハードルのひとつになっているのが、ハンバーガーメニューだと思っています。

ハンバーガーメニューは、アップル社の公式サイトでも使われているので、ご存知の方も多いと思います。
そのため多くのスマホサイトが、このハンバーガーメニューを導入しています。

ハンバーガーメニューは、二本線や三本線で表現されたボタンアイコンの一種で、Webサイトのメインメニューの役目を持っています。

ハンバーガーメニューの設置は、コンテンツのスペース確保に役立つので、多くのスマートフォンサイトで採用されていますが、開くまで他のページがどのくらいあるのか、どのようなページがあるのか分からないというデメリットもあります。

しかし、Webサイトの多くで採用されているので、これから新しく制作する場合にクライアントから要求されることが多いのではないでしょうか？

WordPressのテーマでもレスポンシブ対応済みのものが多く提供されていますので、それを導入するだけで簡単にハンバーガーメニューを設置することも可能です。

ただし、WordPressを導入しない、いわゆる静的コーディングで制作する場合は、JavascriptやjQueryでメニューの動作を構築する必要があります。

JavascriptやjQueryは、スクリプト言語なので、プログラミングの知識が必要になってくるため、マークアップエンジニア、コーダーには少しハードルが高くなってしまいます。

そこで、今回は自由に転用していただいてOKのサンプルコードを提供したいと思います。
このサンプルコードを使いながら、ハンバーガーメニューの仕組みも解説していきますので、ご自身のサイトを構築したり、クライアントのWebサイトを構築する際に自由に使っていただいて結構です。

その代わりと言っては何ですが、こちらのnoteは有料とさせていただきます。

また、特別価格としてワンコインで購入いただけるように致します。
サンプルコード更新や記事内容の更新があった場合には、特別価格が終了となりますので、この機会にぜひご利用下さい。

今回提供するサンプルコードは、ハンバーガーメニューとしての最低限の機能を簡単に実装できるように構築しています。
そのまま使っても結構ですし、見た目や動きなど、ご自由に改変しても結構です。

それでは、早速サンプルコードをご紹介していきたいと思います。