ハンバーガーメニューをご存じですか？ナビゲーションバー内のメニュー表示の一つで「三」のような形で３本の横棒を並べたアイコンで出来ています。このアイコンをタップやクリックすると、メニューが表示されます。主に画面が狭いタブレットやスマートフォン向けのWEBサイトでメニューを表示する際に使用します。
スマートフォン向けのWEBサイトメニューに組み込まれるハンバーガーメニューの作り方についてゼロから徹底解説します！
ナビゲーションバー、及びハンバーガーメニューとは一体どういうものなのか、レスポンシブデザインによって配列はどう変わるのかも含めてご紹介します。
白紙のページに①「＋」ボタン（Add Elements） > ②Layouts > ③Navigationを選択します。ナビゲーションバーのテンプレートがいくつかあるため、何れか一つを選択します。
ナビゲーションバーが設置出来ました。一般的にWEBサイトの上部に配置するもので、左からサービスロゴ（会社ロゴ）、中央にサービスの特長や事例、価格、商材情報など、一番右には問い合わせボタン等を配置するものが一般的な構成です。
ハンバーガーメニューがどういう動作をするのか気になりますよね？作成したナビゲーションバーテンプレートのレスポンシブデザインをスマートフォン縦（一番右）にした状態で、左上のプレビュー（目のアイコン）をクリックします。
ハンバーガーメニューをクリックすると、PCのナビゲーションバーで設定されていた特長や事例などのリンクテキストがアニメーションと共に表示されることが分かります。本記事ではこのハンバーガーメニューをオリジナルで作成することです。
ナビゲーションバーやハンバーガーメニューの概要を理解したところで、いよいよオリジナルナビゲーションバーの作成を行います。
ナビゲーションバーにロゴデータやテキストリンクなどを入れるための箱を用意します。
オリジナルナビゲーションバーのスタイルを調整します。スタイル調整とは、画像などの大きさや配置を揃えることです。今回は、ロゴとテキストリンクを左右に分けて配置し縦に中央揃いにします。また、ナビゲーションバーの境界線を追加します。
仮にオリジナルナビゲーションバーのスタイル設定を下記のように行います。それぞれのパラメータを触ったら、どのようにスタイルが変わるか確認しながら自分の好みのスタイルに変更してみましょう。
ナビゲーションバーのPC版の調整完了後、次は他のデバイスでの見栄えを調整します。スマートフォン縦の表示を見てみましょう。
赤く囲まれた部分をご覧ください。テキストリンクが枠からはみ出ています。また、ロゴ画像も大きく表示されており、バランスが悪い状態です。webflowは、レスポンシブデザインを調整することで、各デバイス毎の画像サイズやテキストサイズが個々で調整され非常に便利です。
如何でしょうか？スマートフォン縦のナビゲーションバーはロゴのみが表示されている状態でスッキリしています。ただし、メニューが無い為若干寂しくも感じます。ここでいよいよハンバーガーメニューの登場です。
調整したレスポンシブデザインの右側にハンバーガーメニューアイコンを配置します。
さらに、メニュークリックでアニメーションが行われる方法を紹介します。詳細は下記の記事をご参照下さい。
06.png)
007.png)
10.png)
05.png)
.png)
2.png)
1.png)