カスタマイズされた選択パネル

Webflow は、ナビゲーション バーや Web ページの任意のセクションに簡単に配置できる既成の選択機能を提供します。これにより、カスタマイズされた選択パネルをすばやく作成できます。

ただし、選択パネルの構築、スタイル設定、および管理に関してさらに高度な権限が必要な方のために、このチュートリアルでは、パーソナライズされた選択パネルの構築方法について説明します。

前提条件

• 活用する ブロック要素 パーソナライズされた選択コンポーネントを作成する
• いくつか挿入します アンカー要素 選択コンテンツコンテナ内
• また、雇用する 行動 選択パネルを機能させる（起動時に開閉する）

このチュートリアル全体を通して

カスタマイズされた選択パネルを作成するには、次の手順に従います。

1. 選択コンテナを確立する
2. 選択トリガーを開発する
3. 選択コンテンツコンテナを構築する
4. 選択パネルを切り替えるアクションを開始します

選択コンテナを確立する

1. 最初の ブロック要素 から 要素を追加する セクション。
2. 割り当てる クラス 名前。これは「選択ラッパー」と呼ばれます。
3. 指定する 幅 寸法
4. 調整する 位置 に： 相対的 — これにより、今後表示される「選択コンテンツ」コンテナの絶対的な配置が容易になります。

さらに詳しく: ポジショニングに関する洞察

デザイン提案
固定幅を設定する場合は、max-width を 100% 以下に制限するようにしてください。こうすることで、小型デバイスで要素が幅を超えないようにすることができます。逆に、幅を 100% に設定し、max-width を 500px や 1200px などの特定の値に設定することもできます。こうすることで、テキスト行が大きな画面で伸びたり、画像が元の鮮明さを超えたりすることがなくなります。

選択トリガーを開発する

1. 2番目を挿入 ブロック要素 選択ラッパー内でこれを実行してください ナビゲーター 選択ラッパーにキャンバスの高さが足りないためです。
2. 適用する クラス このブロック要素に「選択トリガー」という名前を付けました。
3. ドロップする テキスト要素 選択トリガーに追加します。テキストを変更するにはダブルクリックします。
4. 次のようなスタイルを追加します 背景の陰影 （またはパターンやグラデーション）を選択トリガーブロック要素に追加
5. テキストにスペースを入れるには、 パディング

構造のヒント
選択トリガーにはさまざまなコンテンツを含めることができます。空白のままにすることもできます。たとえば、アイコンや「閉じる」という別のテキスト要素を挿入できます。

ホバーステータスを調整し、トリガーのカーソルの外観を変更します

あなたは、 ホバーステータス 選択トリガーを使用して、ユーザーがホバーするとクリックするように誘導します。

さらに詳しく: ステータスのスタイル設定

選択ホバー時にマウスカーソルが変に感じるかもしれません。 カーソルの種類 トリガー ブロック要素内で使用されます。リンクの場合、通常はポインター カーソルが優先されます。または、任意のカーソル タイプを選択することもできます。

もっと詳しく知る： ポインタ

選択コンテンツコンテナの偽造

1. 新鮮なものを挿入 ブロック要素 選択ラッパー内を右クリックし、選択トリガーの下に配置します。
2. 定義する クラス 名前付きドロップダウンコンテンツ
3. 確実に 位置は絶対的である — これにより、選択した内容がページ上の他のコンテンツに置き換わるのを防ぐことができます。
4. をセットする 幅100% 選択ラッパー内のアクセス可能なスペースをすべて占有する
5. をセットする 非表示にオーバーフロー — これは後でアクションを設定するときに役立ちます
6. 含める 背景の陰影 必要に応じて

もっと詳しく知る： オーバーフロー

コンテンツの組み込み

内容はさまざまです。ここでは、いくつかのアンカー要素が組み込まれます。

1. ドレープ アンカー要素 パネルから選択コンテンツコンテナ内に配置します
2. 属性a クラス アンカー要素に追加します。ここでは「ドロップダウン リンク」と表記しますが、任意の名前を挿入することもできます。
3. 調整する 表示設定をブロックする 選択コンテンツコンテナの幅全体を埋める
4. ユニフォームを塗る パディング Shiftキーを押しながらドラッグすると、4辺すべてに
5. 挿入 テキスト要素 アンカー要素に
6. 複製する アンカー要素 選択したリンクに必要な数だけ貼り付けます
7. それぞれダブルクリック テキスト要素 すべての選択リンクの名前を変更する
8. アンカー 各アンカー要素を関連リソースへ

参照する： さまざまなリンク要素のリンク設定を構成するためのガイド

リンクテキストのカスタマイズ

リンクのスタイルは すべてのリンク タグ。したがって、アンカー要素内にネストされたテキスト要素を変更しても、 すべてのリンク テキスト スタイル。アンカー要素内のテキストにスタイルを設定するには、アンカー要素自体のタイポグラフィにスタイルを設定する必要があります。

1. を選択 アンカー要素 (ドロップダウンリンク)
2. 変更する テキストの色相
3. 排除する 下線（テキスト装飾）をなし リンクの下線を削除する

さらなる洞察を発掘する

• テキストスタイルの継承
• HTMLタグ

選択を切り替えるアクションを確立する

指定された要素の選択時にマウスのクリック (またはタップ) で発生するアクションを作成します。これを構築するには、次の手順を実行します。

1. 選択トリガーを選択
2. アクションを開始する: 要素トリガー: マウスクリック（タップ）

しかし、クリックではなくホバーで選択パネルを切り替えたい

今後のアニメーションは同じですが、現時点では、 選択ラッパー 選択して 要素トリガー: マウスホバーその後、以下の手順に進みます。

選択を発表する

1. 下 1回目のクリックで （または ホバー時）、新しい アニメーション選択範囲を開いて名前を付けます。
2. 選択コンテンツブロック要素を選択してください
3. 最初の アニメーションアクション: サイズ
4. をセットする 高さをゼロ（0ピクセル）にするオーバーフローは選択内容に隠れているため、目立たずに消えます。
5. これを 初期状態 ページの読み込み時に選択内容が表示されないようにする
6. 次のものを作成する アニメーションアクション: サイズ
7. 指定する 高さは自動 — フィールドに手動で「自動」と入力し、Enter キーを押します。または、フィールドの横にある単位をタップし、単位リストから自動を選択します。

選択範囲を非表示にする

1. 下に 2回目のクリックで （または ホバーアウト時）、新しいタイムド アニメーションこれを選択終了としてラベル付けします。
2. 選択内容を選択
3. 策定する アニメーションアクション: サイズ
4. 元に戻す 身長 戻る 0ピクセル

理解することが必須
アニメーション アクションのイージングと継続時間を調整して、選択の切り替え時に独特のアニメーションを作成できます。 

‍

前進する

パーソナライズされた選択パネルの作成方法を理解したら、このアプローチを拡張して、次のようなより洗練された要素を作成できます。 拡張モジュール FAQに最適.

参考文献

• 拡張モジュールの設置
• インタラクティブな選択矢印の確立