📖
シンプルで直感的なナビゲーション メニューは、Web サイトで最も重要なデザイン要素の 1 つです。これは地図のように機能し、訪問者をホームページの外へ導きます。モバイル デバイスでインターネットを使用する人が増えているため、Web サイトにはモバイル フレンドリーなナビゲーション メニューも必要です。
幸いなことに、Webflow では、モバイル サイトを合理化する折りたたみ可能なハンバーガー メニュー バーを簡単に追加できるようになりました。 Webflow でこのモバイル メニューを編集する方法については、読み続けてください。
ナビゲーションバーを追加する方法
ハンバーガー メニューは、限られた水平スペースで作業する場合に重要なデザイン要素です。これにより、貴重なスペースを占めるかさばる固定ナビゲーション バーが不要になります。
Webflow では、このメニューとその機能は NavBar 要素内に構築されます。この要素をデザインに追加するには、次の 4 つの簡単な手順が必要です。
-
左パネルの上部にある「+」アイコンをタップして、「追加」パネルを開きます。
-
「コンポーネント」セクションまで下にスクロールします。
-
「NavBar」要素をクリックして押し続けます。
-
要素をページのヘッダーにドラッグします。
モバイルメニューの編集方法
Web サイトにナビゲーション バーを追加したら、さまざまな方法でこのメニューにスタイルと個性を追加できます。
メニューにリンクを追加する方法
ナビゲーション バー要素にはメニュー ボタンとナビゲーション メニューが含まれており、後者にはナビゲーション リンクが保持されます。これをデザインに追加すると、Web サイトのリンクを削除または編集できるリンク プレースホルダーがいくつか表示されます。
さらにナビゲーション リンクを追加するには、次の手順に従います。
-
NavBar 内の任意の要素をクリックします。
-
右側の「要素設定」パネルに進みます。
-
歯車アイコンを押して「設定」を開きます。
-
「NavBar 設定」セクションまでスクロールします。
-
「リンクを追加」ボタンをタップします。
関連する Web サイトのすべてのページに十分な数のリンクが用意されたので、実際にリンクを作成します。
- ナビゲーション リンクを選択します。
-
「要素設定」パネルに移動します。
-
「リンク設定」セクションを見つけます。
-
「URL」欄に指定のWebページのURLを入力します。
メニューアニメーションの変更方法
Webflow では、訪問者がメニュー ボタンをクリックしたときにモバイル メニューがどのように表示されるかを変更することもできます。これらの公開アニメーションの 3 種類から選択できます。
- ドロップダウン – デフォルトでは、訪問者がメニュー ボタンをタップすると、モバイル メニューが NavBar からドロップダウンされます。ブラウザウィンドウの幅全体を占めます。
- 右上 – この公開アニメーションを選択すると、モバイル メニューが画面の右側に表示されます。このメニューはブラウザ ウィンドウの高さ全体を占めます。
- 左上 – このメニュー タイプは、ナビゲーション メニューが画面の左側から移動することを除いて、右上と同じです。
希望の公開アニメーションを設定するには、次の手順を実行します。
-
NavBar 内の任意の要素を選択します。
-
画面の右側にある「要素設定」パネルに移動します。
-
歯車アイコンをタップして「設定」を起動します。
-
「NavBar 設定」セクションに移動します。
-
「タイプ」オプションをクリックします。
-
ドロップダウン メニューから希望のスタイルを選択します。
「NavBar 設定」セクションでは、次のことも制御できます。
- イージング オープン: オープン トランジションをアニメートするために使用されるカーブ タイプ。
- 閉じるイージング: 閉じるトランジションをアニメーション化するために使用されるカーブ タイプ。
- 期間: メニューが表示されるまでの時間。
移行期間はミリ秒単位で測定されることに注意してください。
メニューのスタイルを変更する方法
Webflow を使用すると、ナビゲーション バーの任意の部分のスタイルを簡単に設定できるようになり、モバイル メニューを Web サイトのデザインにシームレスに適合させることができます。
メニュー ボタンのスタイルを設定するには、次の手順を実行します。
-
メニューボタンを選択します。
-
右側の「スタイル」パネル（ブラシアイコン）に移動します。
[スタイル] パネルを使用すると、メニュー ボタンのあらゆる側面を変更できます。最も一般的には、デザイナーはボタンの背景色とサイズを変更します。
背景色を変更するには、次の手順を実行します。
-
「背景」セクションに進みます。
-
カラードロップアイコンをタップして「カラーピッカー」を開きます。
-
希望の色を選択します。
ハンバーガー アイコンのサイズを変更したい場合は、次の手順に従います。
-
「タイポグラフィ」セクションに移動します。
-
「Aa」フィールドのアイコンのサイズを拡大または縮小します。
上のフィールドで、文字 A とカラー ドロップでマークされたアイコンの色を変更することもできます。
メニュー ボタンをカスタマイズする方法はたくさんありますが、テキスト要素やカスタム画像に置き換えることはできません。
モバイルナビゲーションを簡単に
モバイル メニューをデザインするときは、かなり限られたスペースを最大限に活用したいと考えます。したがって、訪問者を混乱させないように、メニューにオプションが溢れないようにしてください。また、メニューの選択肢は短く、明確で、読みやすいものにしてください。
その後、メニューのスタイルやアニメーションを調整して、訪問者の興味をあらゆる段階で維持することができます。
ウェブサイトにモバイルメニューを追加してみましたか?オプションはいくつ入れましたか?以下のコメントセクションでお知らせください。
「 Webflow でモバイル メニューを編集する方法」に関するベスト動画選定！
Webflow ハンバーガー アニメーション: (モバイル メニューの作成方法)
How To Edit Mobile Menu Webflow Tutorial