AIで検索
キーワードを入力するだけで、AIが関連するレッスン、ドキュメント、情報を自動でピックアップします。
キーワードを入力するだけで、AIが関連するレッスン、ドキュメント、情報を自動でピックアップします。
このレッスンでは ナビバーを追加する ナビバーをスタイル設定する ナビバーのメニューボタンを理解する 複数のページでナビバーを再利用する ナビバーをページの最上部に貼り付ける ナビバーにドロップダウンを追加する ナビバーを追加するには、次の手順に従います: パネル要素の追加]を開きます。 コンポーネント]セクションから[ナビバー]を Webflow にドラッグします。
navbarを追加するために:
navbarはサイトのどこにでも設置できます。ナビバーは自己完結型なので、好きな時に好きな場所に移動させることができます。
ナビバーは、ページ上の要素群を中央に配置するコンテナです。
ナビバーにロゴを追加してみましょう。
Designerの左パネルにあるAssetsパネルに移動し、アセットのアップロードと管理を行います。右上の雲のアイコンをクリックし、アップロードするファイルを選択します。ロゴ画像をブランドリンクにドラッグできます。
基本的に、ブランド画像やロゴをホームページにリンクさせます。そのためには
また、スクリーンリーダーやその他のアシスト技術を使用してサイトをナビゲートするサイト訪問者にリンクの目的を説明するために、ロゴリンクにroleとaria-labelを追加します:
ナビバーの2番目のコンポーネントはナビ・メニューです。このコンポーネントはナビリンクを保持します。デフォルトでは、ナビバーには編集、削除、追加が可能な3つのナビリンク・プレースホルダーが付属しています。
nav linksを増やすために:
ナビリンクを追加するもうひとつの方法は、すでにクラスが適用されているナビリンクをコピー&ペーストすることです。これは、複数のナビリンクをスタイリングする予定がある場合、時間の節約になります。これを行うには
このナビリンクを複製すると、貼り付けた新しいナビリンクそれぞれにクラスが適用されます。ナビリンクをダブルクリックすると、中のテキストを編集することができます。
各ナビリンクを異なるソースにリンクさせること:
navbar要素はスタイリングに関して非常に柔軟です。
このセクションでは、そのコントロールを可能にする3つの分野に焦点を当てます:
navbar要素には、幅と高さのプリセット値がありません。これらの値はスタイルパネルで調整できます。
ナブバーをボディ、セクション、または別の要素の中にドロップすると、その要素の幅いっぱいに表示されます。ナビバー自体に幅を設定するか、親要素の幅を狭めることでナビバーを水平方向に制限できます(ナビバーを中央に配置するためにナビバーに auto margin を設定します)。また、ナバーにマージンを追加して(max-widthまたはauto-widthと組み合わせて)、navbarの周りの要素との関係を変更することもできます。
ナビバーの高さは、中のコンテンツ(ブランドロゴの高さかナビリンクの高さ)によって決まります。ナビバーの高さは、以下の方法で調整できます:
ナビリンクを選択し、上下のパディングを調整することで、ナビリンクにパディングを追加できます。ナビリンクとナビバーのサイズはそれに応じて調整されます。また、マージンを追加して同様の効果を得ることもできます。
より一貫したアプローチは、navbarを選択してそのパディングを調整することかもしれません。パディングを増やすと、ナバーとすべてのnavbar要素を保持するコンテナとの間に余分なスペースができるため、高さが増えます。
また、小さなブレイクポイントでナビメニューをクリックしたときに表示されるナビドロップダウンメニューにも同様の変更を加えることができます。タブレットのブレイクポイントでナビバーを選択し、Element settings panelでMenu > Showをクリックすると、ナビドロップダウンメニューにアクセスできます。
タッチデバイスのブレイクポイントでナビリンクの高さを調整することは、タップターゲットのサイズを指のタップに十分な大きさにするのにとても役立ちます。 ナビバーメニューボタンについてもっと知る。
ここでクラスが役立ちます。クラスはスタイリング情報を保存し、サイト内の好きな要素に適用することができます。要素のスタイリングを開始すると、自動的にクラスが作成され、選択した要素に適用されます。この要素に対して行われたすべてのスタイル調整は、このクラスに保存されます。スタイルを追加する前に、Style panelのSelector fieldにクラス名を入力して、手動でクラスを作成することもできます。
Selector fieldには3つの方法でアクセスできます:
これで、それぞれのナビリンクに同じクラスを適用できるので、そのクラスへのスタイル変更はナビバーのすべてのリンクに一度に影響します。
デフォルトやホバー状態など、異なる状態での見え方を変えることで、ナビリンクのインタラクションを視覚的に示すことができます。状態メニューにアクセスするには、ナビリンクを選択し、Style panel > Selector fieldを開き、ドロップダウンメニューをクリックします(ナビリンクにすでにクラスが適用されている場合に利用できます)。
マウスがナビリンクの上にあることを示す最も簡単な方法の1つは、ホバー時の色の変化です。これは、ナビリンクの背景の色を変えることも、ナビリンクのテキストの色を変えることもできます。
ホバーステート時のナビリンクに背景色を追加する:
この背景色は、ユーザーがナビリンクにカーソルを合わせたときに表示されます。
それぞれのナビリンクに同じクラスを適用し、そのクラスの変更がナビバーのすべてのリンクに一度に影響するようにする。
メニューボタンは、モバイルデバイスのように横方向のスペースが限られている場合に、ナビリンクを整理するためのナビバー内の要素です。ハンバーガー・メニューと呼ばれることもあります。メニューボタンとその機能はnavbar要素に組み込まれており、さまざまな方法でアクセスしたり設定したりすることができます。
デフォルトでは、ナビメニューボタンはタブレットのブレークポイント以下に表示されます。プレビューモードを開き、これらのデバイスに切り替えたときにナビバーにメニューが表示されるのを確認できます。メニューボタンをクリックすると、ナビメニューが展開されます。メニューボタンをもう一度クリックすると、ナビメニューが折りたたまれます。
デスクトップのブレイクポイントでは、ナビリンクがnav menu要素の中に入れ子になっているのがわかります。このナビメニューは、小さいブレイクポイントでメニューボタンがクリックされると、ナビリンクを垂直のリストに表示するのと同じ要素です。
以下の手順で、デザイナーでナビメニューを開くことができます:
デザイナーは自動的にタブレットのブレークポイントに切り替わり、ナビメニューを開きます。
ナバーメニューボタンは、最初はタブレットのブレイクポイントに表示されますが、これを変更することで、すべてのブレイクポイント、またはブレイクポイントなしでボタンを表示させることができます:
ナビバーをコンポーネント化して、サイト全体で使用すると便利です。ナビバーをコンポーネント化することで、ナビバーのすべてのインスタンスを素早く再利用し、編集することができます。
navbar コンポーネントを作成するには
コンポーネントを作成したら、メインコンポーネントの編集モードに入ります。メインコンポーネントへのすべての変更は、そのコンポーネントのすべてのインスタンスに反映されます。コンポーネントのインスタンスをダブルクリックすると、メインコンポーネントを編集できます。 コンポーネントの詳細については、こちらをご覧ください。
ナバーはコンポーネントになり、サイト上のどこでもナバーを再利用できるようになりました。
まず、コンポーネント・パネルを開き、ナバー・コンポーネントをクリックして、サイト内の任意のページにドラッグします。他の要素と同じように、コンポーネントをキャンバスに直接ドロップするか、ナビゲータにドロップすると、より正確に表示できます。
コンポーネントのインスタンスを選択すると、そのコンポーネントはハイライトされ、緑色の輪郭が表示されます。コンポーネントパネルを開くと、サイト内でナビバー コンポーネントが何回使用されたかを確認できます。
まず、ナバーがbody要素の直接の子であることを確認したい。なぜか?スクロールしてもナバーが一番上にあるようにしたいからです。スティッキーポジショニングを使えば、残りのコンテンツがスクロールしていく間、ナバーはページの一番上に固定されます。そして、ページの一番上までスクロールして戻ると、ナビバーはページの一番上に再配置されます。
ナビバーをスティッキーに設定するには
Position fixedはドキュメント・フローから要素を取り除くので、ナバーはページ全体の上に浮きます。ナバーがまだ初期位置にあるときは、要素と重なってしまうので、このようなことは起こりません。スクロールしているときだけ、ナバーが固定されたまま他の要素の上に浮くようにしたいのです。
一方、position stickyでは、ドキュメント・フロー内に要素を保持し、要素の初期位置がスクロールされたときだけposition fixedに設定します。そのため、ナビバーは隣接する要素と重なることなく、配置した位置に正確に留まります。スクロールし始めると、ビューポートに固定されます。
positionをstickyに設定し、要素の一辺の距離値を定義したにもかかわらず、position stickyが機能しないことがあります。これにはさまざまな理由があります:
position: stickyは、左または右側に距離を設定し、ページを横にスクロールしている場合、要素は固定されません。
また、stickyの下部に値を設定した場合は機能しません。要素がflexなどで上部にお変えている場合も同様です。
ドロップダウンメニューは、サイトのほぼすべてのエリアに追加できるナビゲーション要素です。通常、ドロップダウンメニューはウェブサイトのナビゲーションバーにあります。
Add panel > Advancedで、ドロップダウン要素をサイト内の好きな場所にドラッグすることができます。
ドロップダウンリストは、ドロップダウンがクリックされるまで表示されません。エレメント設定パネルで Menu > Show をクリックすることで表示させることができます。
デフォルトでは、ユーザーがドロップダウン・トグルをクリックするとドロップダウンリストが表示されますが、Open menu on hoverオプションを有効にすることで、ユーザーがドロップダウン・トグルの上にマウスを置いたときに表示させることができます。close delay(クローズディレイタイム)(ホバーした後にドロップダウンリストが閉じるまでの時間)はミリ秒単位で調整できます。