この投稿はWebflow社が提供する「Navbar」の内容を元に作成しています。
引用元：https://university.webflow.com/lesson/navbar
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
今回は、ナビゲーション バーの追加、カスタマイズ、および再利用方法をご説明します。
レッスン概要
ナビゲーション バーを追加するには：
ナビゲーションバーはサイトのどこにでも配置できます。ナビゲーションバーとして機能するための様々な要素が組み合わさったテンプレ―トパーツになっています。
次の要素をコンテナ要素に含めたパーツになっています。
ナビゲーションバーにロゴを追加しましょう。
デザイナー画面の左パネルにあるアセットパネルを表示します（アセットパネルは画像やドキュメントなどをアップロードおよび管理できます)。右上隅のクラウドアイコンをクリックしてアップロードするファイルを選択することで、Webflow内にアセットをアップロードできます。その後、アセットパネルでロゴをドラッグし、リンクブロックにドロップすることで追加できます。
ロゴをトップページにリンクさせるための一般的な手順は以下です。
ナビゲーションメニューは、各リンクテキスト毎にリンクを設定できます。デフォルトでは、3つのテキストリンクがメニューとして保持されており、これらを編集、削除、追加できます。
ナビゲーションリンクは次の方法で追加できます。
ナビゲーションリンクはすでにナビゲーションメニュー内にある、ナビゲーションリンクをコピー＆ペーストすることでも追加できます。
ナビゲーションリンクに独自の設定を追加している場合は、リンク追加で新しくナビゲーションリンクを追加するよりも、コピー＆ペーストの方が効率的です。
コピー＆ペーストしたナビゲーションリンクにはすでにクラスが設定されています。
ナビゲーションリンクをダブルクリックすることで、テキストの編集が可能です。
各ナビゲーションリンクにリンクを設定する方法は次の通りです。
リンクタイプ「ファイル」は有料のワークスペースプランまたはサイトプランを利用している場合に使用できます。
ナビゲーションバーの要素は、おおよそ自由にスタイルを設定できます。
セッティング方法について主な次の3つについて説明します。
ナビゲーションバーの要素には、幅や高さがデフォルトで設定されていません。これらの値をスタイルパネルで設定することができます。
ボディ、セクション、または別の要素内にナビゲーションバーをドロップすると、その要素の幅全体にナビゲーションバーが広がります。ナビゲーションバー自体に幅のを設定するか、親要素の幅を制御することで、ナビゲーションバーを制御できます(ナビゲーションバーのマージンをオートにして、親要素のレイアウトを中央ぞろえにしましょう)。ナビゲーションバーにマージンを追加して(max widthまたはauto widthしてと組み合わせて) 、ナビゲーションバーの周囲の要素と相関させて制御することもできます。
ナビゲーション バーの高さは、内部のコンテンツ(ブランドロゴの高さまたはナビゲーションリンクの高さ)によって決まります。ナビゲーションバーの高さは、次の方法で調整できます。
ナビゲーションリンクを選択し、上下のパディングを調整することで、ナビゲーションリンクにパディングを追加できます。マージンを追加することでも、同様のスタイリングをすることができます。
ナビゲーションバーを選択し、そのパディングを調整することで一括で高さを指定できます。パディングを増やすと、ナビゲーションバーとすべてのナビゲーションバーの要素を保持するコンテナとの間に余分なスペースが作成されるため、高さが増加します。
Option + ドラッグ (Mac の場合) またはAlt + ドラッグ (Windows の場合)で、パディングやマージンの上下もしくは左右をまとめて変更できます。
小さいブレークポイントでナビゲーションメニューをクリックしたときに表示されるナビゲーションドロップダウンメニューでも同様の変更ができます。タブレット端末のブレークポイントでナビゲーションバーを選択し、設定パネルで[メニュー] > [表示]をクリックすると、ナビゲーションドロップダウンメニューを表示することができます。
タッチデバイスのブレークポイントでナビゲーションリンクの高さを調整するのは、ナビゲーションメニューをユーザーにとって使いやすい大きさにするためです。
ナビゲーションリンクのスタイル設定にはクラスが便利です。クラスは、そのクラスを付与した要素に設定されているスタイルを保持しています。なので、クラスを他の要素に付与することで、サイト内の好きな要素に同じスタイルを適用することができます。要素のスタイルを変更すると、自動的にクラスが作成され、選択した要素に適用されます。この要素に対して行われたスタイルは、すべてこのクラスに保存されます。スタイルを追加する前に、「スタイル」パネルの「セレクタ」フィールドにクラス名を入力して、クラスを手動で作成することもできます。
Selectorフィールドにアクセスするには、次の3つの方法があります。
これで、同じクラスを各ナビゲーションリンクに適用できるので、1つのナビゲーションリンクのスタイルを変更すれば、同じクラスを持つナビゲーションリンクすべてのスタイルに変更を掛けることができます。
デフォルトやホバーステータスなど、さまざまなステータスでのスタイルを変更することで、ナビゲーションリンクをデザインすることができます。ステータスメニューを表示するには、ナビゲーションリンクを選択して[スタイル]パネル > [セレクターフィールド] を開き、ドロップダウンメニューをクリックします(ナビゲーションリンクに既にクラスが適用されている場合に表示されます)。
ナビゲーションリンクのデザインで一般的なものの一つに、ホバー時の色を変える方法があります。これは、ナビゲーションリンクの背景の色の変更、またはナビゲーションリンクのテキストの色の変更を行うことで、デザインできます。
ホバーステータスのナビゲーションリンクに背景色を追加するには次の方法があります。
この背景は、ユーザーがナビゲーションリンクにカーソルを合わせると表示されます。
各ナビゲーションリンクに同じクラスを適用して、そのクラスへの変更がナビゲーションバーのすべてのリンクにまとめて設定されるようにすると良いでしょう。
メニューボタンは、モバイル端末のように画面幅が狭い場合に、ナビゲーションリンクを格納しておくための要素です。ハンバーガーメニューと呼ばれることもあります。メニューボタンとその機能は、ナビゲーションバー要素に組み込まれており、さまざまな方法で表示および設定することができます。
デフォルトでは、ナビゲーションメニューボタンは、タブレットのブレークポイント以下で表示されます。プレビューモードを開き、これらのブレークポイントに切り替えたときに、ナビゲーションバーにメニューが表示されます。メニューボタンをクリックすると、ナビゲーションメニューが展開されます。もう一度メニューボタンをクリックすると、ナビゲーションメニューが折りたたまれます。デスクトップのブレークポイントでは、ナビゲーションリンクがナビゲーションメニュー要素の中にネストされていることがわかります。このナビゲーションメニューは、小さいブレークポイントでメニューボタンをクリックしたときに、縦並びで表示されているナビゲーションリンクと同じものです。
次の手順で、デザイナーでナビゲーションメニューを開くことができます。
デザイナー画面が自動的にタブレットブレークポイントに切り替わり、ナビゲーションメニューを開きます。
ナビゲーションメニューボタンは、最初はタブレットのブレークポイント時に表示されますが、これを変更して、すべてのブレークポイントでボタンを表示することも、すべてのブレークポイントで表示しないようにすることもできます。
ナビゲーションバーをサイト内の各ページで使用する場合はシンボル化すると便利です。ナビゲーションバーをシンボルに変えると、ナビゲーションバーのすべての要素をまとめて再利用でき、編集が一括で行われます。
ナビゲーションバーのシンボルを作成するためには次の方法があります。
シンボルを作成すると、シンボルの編集モードが開きます。編集モードでのすべての変更は、そのシンボルが使われているすべてのインスタンスに反映されます。どのシンボルからでもダブルクリックで編集モードに入ることができます。
上の1つ目の画像では、ナビゲーションバーを右クリックした後に表示されるドロップダウンメニューを示しています。2つ目の画像では、クリエイトシンボルをクリックした後に表示される、シンボルの命名ダイアログを表示しています。
これで、サイト内のどこでも同じナビゲーションバーを再利用できます。
シンボルパネルを開き、ナビゲーションバーのシンボルをクリックして、サイト内の任意のページにドラッグします。他の要素と同様に、シンボルをキャンバスまたはナビゲーターに直接ドロップすることもできます。
シンボルのインスタンスを選択すると、強調表示され、緑色の枠が表示されます。スタイルパネルを開き、サイト内にそのシンボルのインスタンスがいくつあるかを確認できます。
上の1つ目の画像では、シンボルパネルが表示されています。2つ目の画像では、スタイルパネルにナビゲーションバーのシンボルのインスタンス数が表示されています。
スクロールしても一番上に表示されるようにするためには、まずナビゲーションバーが ボディ要素の直接の子要素であることを確認します。ポジションをスティッキーにすることで、ナビゲーションバーがページの上部に固定され、スクロールされなくなります。
ナビゲーションバーをスティッキーに設定するには次の方法があります。
ポジションをフィックスドにすると、ナビゲーションバーはページ全体の上に浮かびます。ナビゲーションバーとそのほかの要素が重なるようになります。
一方、ポジションをスティッキーにすると、要素の初期位置がスクロールされたときの固定位置になります。そのため、ナビゲーションバーは、他の要素と重なることなく、配置した場所にとどまります。スクロールし始めると、ビューポートに上部に固定されます。
ポジションをスティッキーに設定し、ポジションの値を1つ変更しても、スティッキーが機能しないことがあります。これは、様々な理由で発生します。
スクロールの影響を受けない側に位置距離の値が設定されている場合、位置スティッキーが機能しない可能性があります。たとえば、左または右に距離を設定し、ページを垂直にスクロールしている場合、要素はくっつきません。
たとえば、上部ではなく下部までの距離を設定し、要素が親の上部に配置されている場合も機能しません。これは、親の最初の要素であるか、上に配置されていますフレックスまたはグリッド配置の設定。
ドロップダウンメニューは、サイトのほぼすべての領域に追加できるテンプレートのナビゲーション要素です。Webサイトのナビゲーションバーにドロップダウン要素を設定するのはごく一般的な構築です。
エレメント追加パネル > コンポーネントから、ドロップダウン要素をサイト内の目的の場所にドラッグできます。
ドロップダウンリストは、ドロップダウンをクリックすると表示されます。設定パネルで、メニュー > 表示をクリックして表示することができます。
デフォルトでは、ユーザーがドロップダウンをクリックするとドロップダウンリストが表示されますが、 ホバー時にメニューを開くオプションを有効にすることで、ユーザーがドロップダウンの上にカーソルを置いたときにドロップダウンリストが表示されるようにすることができます。閉じるまでの時間は、m単位で調整できます。
いかがでしょうか。
当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。
以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。
ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。
Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。
今後とも宜しくお願い致します。
Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。
Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。
Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営