Navbar

navbarの追加

navbarを追加するために:

1. Add panel > Elements
2. Advanced section からNavbarをWebflowキャンバスにドラッグ

navbarはサイトのどこにでも設置できます。ナビバーは自己完結型なので、好きな時に好きな場所に移動させることができます。

ナビバーは、ページ上の要素群を中央に配置するコンテナです。

• Brand: ブランドは、ナビバーの左側にあるリンクブロックです。ここにロゴやテキスト、その他のブランド表示を追加することができます。
• Nav menu: ナビ・メニューはナビバーの右側にある。すべてのナビゲーション（ナビ）リンクを含む親要素です。
• Nav links: これは、あらかじめ定義されたパディングやその他のスタイルを持つテキストリンクです。通常、ウェブサイトのさまざまなページやセクションにリンクされています。
• Menu button: デフォルトでは、メニューボタンはデスクトップ表示では非表示ですが、タブレットのブレイクポイント以下では表示されます。これにより、モバイルデバイスのように横方向のスペースが限られている場合でも、ナビメニュー（およびナビリンク）にアクセスすることができます。 ナビバー・メニュー・ボタンについて、詳しくはこちらをご覧ください。

ブランドロゴの設定

ナビバーにロゴを追加してみましょう。

Designerの左パネルにあるAssetsパネルに移動し、アセットのアップロードと管理を行います。右上の雲のアイコンをクリックし、アップロードするファイルを選択します。ロゴ画像をブランドリンクにドラッグできます。

ブランドロゴをホームページにリンク

基本的に、ブランド画像やロゴをホームページにリンクさせます。そのためには

1. Brand linkを選択
2. Element settings panel > Link settings
3. link typesからPageを選択
4. Page dropdownを開いてHomeを選択

また、スクリーンリーダーやその他のアシスト技術を使用してサイトをナビゲートするサイト訪問者にリンクの目的を説明するために、ロゴリンクにroleとaria-labelを追加します：

1. Brand linkを選択
2. Element settings panel > Custom attributes
3. ”プラス“ボタンをクリック
4. Nameフィールドに "role"、Valueフィールドに "navigation "と入力する。
5. プラスボタンをクリック
6. Nameフィールドに "aria-label "を入力し、Valueフィールドにブランドリンクの目的を表す値（例えば、"Back to homepage"、"Back to main "など）を入力する。

nav linkの追加

ナビバーの2番目のコンポーネントはナビ・メニューです。このコンポーネントはナビリンクを保持します。デフォルトでは、ナビバーには編集、削除、追加が可能な3つのナビリンク・プレースホルダーが付属しています。

nav linksを増やすために:

1. Navbarを選択
2. Element settings panel > Navbar settings
3. Add linkをクリック

ナビリンクを追加するもうひとつの方法は、すでにクラスが適用されているナビリンクをコピー＆ペーストすることです。これは、複数のナビリンクをスタイリングする予定がある場合、時間の節約になります。これを行うには

1. ナビリンクを1つ除いてすべて削除
2. Style panel > Selector fieldでnav linkにクラスを追加
3. ナビリンクを必要なだけコピー＆ペースト

このナビリンクを複製すると、貼り付けた新しいナビリンクそれぞれにクラスが適用されます。ナビリンクをダブルクリックすると、中のテキストを編集することができます。

nav linksのリンク

各ナビリンクを異なるソースにリンクさせること：

1. nav linkを選択
2. Element settings panel > Link settings
3. リンクタイプを選択

注: ファイルリンクタイプは、一部の有料ワークスペースまたはサイト プランでのみ使用できます。

Style a navbar

navbar要素はスタイリングに関して非常に柔軟です。

このセクションでは、そのコントロールを可能にする3つの分野に焦点を当てます：

• ナビバーとナビメニューのサイズ
• ナビリンクのスタイル
• ナビリンクのステート

navbarとnav menuのサイズ

navbar要素には、幅と高さのプリセット値がありません。これらの値はスタイルパネルで調整できます。

Navbar幅

ナブバーをボディ、セクション、または別の要素の中にドロップすると、その要素の幅いっぱいに表示されます。ナビバー自体に幅を設定するか、親要素の幅を狭めることでナビバーを水平方向に制限できます（ナビバーを中央に配置するためにナビバーに auto margin を設定します）。また、ナバーにマージンを追加して（max-widthまたはauto-widthと組み合わせて）、navbarの周りの要素との関係を変更することもできます。

Navbar高さ

ナビバーの高さは、中のコンテンツ（ブランドロゴの高さかナビリンクの高さ）によって決まります。ナビバーの高さは、以下の方法で調整できます：

• navbarに高さの値を追加する
• ナバーに上下のパディングを追加する
• ナバー内のコンテンツに上下のパディングを追加する

ナビリンクを選択し、上下のパディングを調整することで、ナビリンクにパディングを追加できます。ナビリンクとナビバーのサイズはそれに応じて調整されます。また、マージンを追加して同様の効果を得ることもできます。

より一貫したアプローチは、navbarを選択してそのパディングを調整することかもしれません。パディングを増やすと、ナバーとすべてのnavbar要素を保持するコンテナとの間に余分なスペースができるため、高さが増えます。

知っておくと便利：要素の相補的な辺のマージンやパディングを同時に調整するには、Option + ドラッグ（Macの場合）またはAlt + ドラッグ（Windowsの場合）を使用します。 マージンとパディングについてさらに詳しく

ナビメニューの高さ

また、小さなブレイクポイントでナビメニューをクリックしたときに表示されるナビドロップダウンメニューにも同様の変更を加えることができます。タブレットのブレイクポイントでナビバーを選択し、Element settings panelでMenu > Showをクリックすると、ナビドロップダウンメニューにアクセスできます。

タッチデバイスのブレイクポイントでナビリンクの高さを調整することは、タップターゲットのサイズを指のタップに十分な大きさにするのにとても役立ちます。 ナビバーメニューボタンについてもっと知る。

ナビリンクのスタイル

ここでクラスが役立ちます。クラスはスタイリング情報を保存し、サイト内の好きな要素に適用することができます。要素のスタイリングを開始すると、自動的にクラスが作成され、選択した要素に適用されます。この要素に対して行われたすべてのスタイル調整は、このクラスに保存されます。スタイルを追加する前に、Style panelのSelector fieldにクラス名を入力して、手動でクラスを作成することもできます。

Selector fieldには3つの方法でアクセスできます：

• Style panelのSelector fieldをクリックします。
• Command + Return (Mac) or Control + Enter (Windows)を押します。
• 要素を右クリックし、メニューの「Add class」をクリックします。

これで、それぞれのナビリンクに同じクラスを適用できるので、そのクラスへのスタイル変更はナビバーのすべてのリンクに一度に影響します。

Nav link ステータス

デフォルトやホバー状態など、異なる状態での見え方を変えることで、ナビリンクのインタラクションを視覚的に示すことができます。状態メニューにアクセスするには、ナビリンクを選択し、Style panel > Selector fieldを開き、ドロップダウンメニューをクリックします（ナビリンクにすでにクラスが適用されている場合に利用できます）。

マウスがナビリンクの上にあることを示す最も簡単な方法の1つは、ホバー時の色の変化です。これは、ナビリンクの背景の色を変えることも、ナビリンクのテキストの色を変えることもできます。

ホバーステート時のナビリンクに背景色を追加する：

1. Style panel > Selector field
2. ナビリンクにクラスがない場合は追加する。
3. Selector field dropdownをクリック
4. Hoverを選択
5. Style panel > Backgrounds をクリックし、背景色を追加します。

この背景色は、ユーザーがナビリンクにカーソルを合わせたときに表示されます。

それぞれのナビリンクに同じクラスを適用し、そのクラスの変更がナビバーのすべてのリンクに一度に影響するようにする。

nav barのメニューボタンを理解する

メニューボタンは、モバイルデバイスのように横方向のスペースが限られている場合に、ナビリンクを整理するためのナビバー内の要素です。ハンバーガー・メニューと呼ばれることもあります。メニューボタンとその機能はnavbar要素に組み込まれており、さまざまな方法でアクセスしたり設定したりすることができます。

デフォルトでは、ナビメニューボタンはタブレットのブレークポイント以下に表示されます。プレビューモードを開き、これらのデバイスに切り替えたときにナビバーにメニューが表示されるのを確認できます。メニューボタンをクリックすると、ナビメニューが展開されます。メニューボタンをもう一度クリックすると、ナビメニューが折りたたまれます。

デスクトップのブレイクポイントでは、ナビリンクがnav menu要素の中に入れ子になっているのがわかります。このナビメニューは、小さいブレイクポイントでメニューボタンがクリックされると、ナビリンクを垂直のリストに表示するのと同じ要素です。

デザイナーでメニューを開く

以下の手順で、デザイナーでナビメニューを開くことができます：

1. ナビバーまたはナビバー内の要素を選択
2. Element settings panel > Navbar settings
3. Menu > Show

デザイナーは自動的にタブレットのブレークポイントに切り替わり、ナビメニューを開きます。

ブレークポイントごとにボタンの表示をカスタマイズする

ナバーメニューボタンは、最初はタブレットのブレイクポイントに表示されますが、これを変更することで、すべてのブレイクポイント、またはブレイクポイントなしでボタンを表示させることができます：

1. navbarまたはnavbar内の要素を選択
2. Element settings panel > Navbar settings
3. デバイスオプションのスライダーを使用して、メニューボタンが最初に表示される場所を選択

複数のページでナビバーを再利用する

ナビバーをコンポーネント化して、サイト全体で使用すると便利です。ナビバーをコンポーネント化することで、ナビバーのすべてのインスタンスを素早く再利用し、編集することができます。

navbar コンポーネントを作成するには

1. キャンバス上のNavbarを選択
2. Navbarを右クリックし、Create componentを選択します。
3. コンポーネントに名前を付け、"Create "をクリックします。

コンポーネントを作成したら、メインコンポーネントの編集モードに入ります。メインコンポーネントへのすべての変更は、そのコンポーネントのすべてのインスタンスに反映されます。コンポーネントのインスタンスをダブルクリックすると、メインコンポーネントを編集できます。 コンポーネントの詳細については、こちらをご覧ください。

navbarの再利用

ナバーはコンポーネントになり、サイト上のどこでもナバーを再利用できるようになりました。

まず、コンポーネント・パネルを開き、ナバー・コンポーネントをクリックして、サイト内の任意のページにドラッグします。他の要素と同じように、コンポーネントをキャンバスに直接ドロップするか、ナビゲータにドロップすると、より正確に表示できます。

コンポーネントのインスタンスを選択すると、そのコンポーネントはハイライトされ、緑色の輪郭が表示されます。コンポーネントパネルを開くと、サイト内でナビバー コンポーネントが何回使用されたかを確認できます。

ページ上部にナビバーを付ける

まず、ナバーがbody要素の直接の子であることを確認したい。なぜか？スクロールしてもナバーが一番上にあるようにしたいからです。スティッキーポジショニングを使えば、残りのコンテンツがスクロールしていく間、ナバーはページの一番上に固定されます。そして、ページの一番上までスクロールして戻ると、ナビバーはページの一番上に再配置されます。

ナビバーをスティッキーに設定するには

1. Navbarを選択
2. Style panel > Position
3. position dropdownからstickyを選択
4. スクロール時にナバーが上部に固定されるように、top値に0ピクセルを設定する。
5. 高いz-index値を追加する（例：2147483647、ほとんどのブラウザで検出される最高のz-index値です）

重要：sticky positionが機能するように、スティッキー要素の少なくとも片側に値を設定してください。

position fixed とsticky を理解する

Position fixedはドキュメント・フローから要素を取り除くので、ナバーはページ全体の上に浮きます。ナバーがまだ初期位置にあるときは、要素と重なってしまうので、このようなことは起こりません。スクロールしているときだけ、ナバーが固定されたまま他の要素の上に浮くようにしたいのです。

一方、position stickyでは、ドキュメント・フロー内に要素を保持し、要素の初期位置がスクロールされたときだけposition fixedに設定します。そのため、ナビバーは隣接する要素と重なることなく、配置した位置に正確に留まります。スクロールし始めると、ビューポートに固定されます。

position stickyのトラブルシューティング

positionをstickyに設定し、要素の一辺の距離値を定義したにもかかわらず、position stickyが機能しないことがあります。これにはさまざまな理由があります：

• 要素の親要素で、overflowがhidden、scroll、autoのいずれかに設定されている場合、position stickyが機能しないことがあります。
• 親要素の高さが設定されている場合、位置のスティッキーは正しく機能しない場合があります。
• 多くのブラウザはまだスティッキーポジショニングをサポートしていません。position:stickyをサポートしているブラウザを確認する。

position: stickyは、左または右側に距離を設定し、ページを横にスクロールしている場合、要素は固定されません。

また、stickyの下部に値を設定した場合は機能しません。要素がflexなどで上部にお変えている場合も同様です。

navbarにドロップダウンを追加する

ドロップダウンメニューは、サイトのほぼすべてのエリアに追加できるナビゲーション要素です。通常、ドロップダウンメニューはウェブサイトのナビゲーションバーにあります。

Add panel > Advancedで、ドロップダウン要素をサイト内の好きな場所にドラッグすることができます。

ドロップダウン設定

ドロップダウンリストは、ドロップダウンがクリックされるまで表示されません。エレメント設定パネルで Menu ＞ Show をクリックすることで表示させることができます。

デフォルトでは、ユーザーがドロップダウン・トグルをクリックするとドロップダウンリストが表示されますが、Open menu on hoverオプションを有効にすることで、ユーザーがドロップダウン・トグルの上にマウスを置いたときに表示させることができます。close delay(クローズディレイタイム)（ホバーした後にドロップダウンリストが閉じるまでの時間）はミリ秒単位で調整できます。