こんにちは、ゴヨウです。
静的コーディングで、WEBサイトを制作していて、レスポンシブWEBデザインの対応をする時に、ひとつハードルとなっているのが、ハンバーガーメニューではないでしょうか？
WEB制作の現場では、ハンバーガーメニューについて、その役割や効果などは賛否が分かれるところです。
Appleの公式サイトでも採用されているため、多くの企業やショップなどのサイトで使われています。
ハンバーガーメニューは、表示領域の狭いスマートフォンで多くのコンテンツを表示するために、メニューを小さくする効果があるのですが、メニューを開いてみないと、下層コンテンツの数や内容が分からないというデメリットもあります。
開いたり、閉じたりする効果を実装するには、スクリプトを組み込む必要がありますが、結論から言いますと、ハンバーガーメニューはそれほど難しくありません。
複雑な動作や効果を目指すのであれば、プラグインやライブラリを使う必要がありますが、基本的なスライド式の開閉であれば、実は数行のスクリプトで実装することができます。
今回は、有料noteという形ですが、サンプルコードを用意して詳しく説明しています。
ワンコインで購入できますので、サンプルコードは自由に使っていただいたり、改変してもOKです。
サンプルコードは、今後改良を加えていきますので、ぜひ有効活用していただきたいと思います。
また、ワンコインで購入できるのは、サンプルコードの更新や記事内容の更新を行うまでの間とさせていただきますので、今のうちに購入していただけるとお得です。
今、購入していただければ、更新後のサンプルコードも自由に使えます。
