チュートリアル: ドロップダウン・メニュー・リンクの作成

ドロップダウン・メニューまたはネストされたメニューを作成および使用して、 開発者ポータル の使用を拡張することができます。

開始前に

このチュートリアルを完了するには、 開発者ポータル を有効にして、管理者権限を持っている必要があります。 チュートリアル「 ポータルの作成 」では、ポータルを有効にする方法が説明されています (まだ有効になっていない場合)。

このチュートリアルについて

このチュートリアルでは、 Main navigation メニューにドロップダウン・メニュー・リンクを作成します。

注:

ドロップダウンメニューのリンクは Developer Portal で作成できますが、ドロップダウンメニューはデフォルトでは展開されません。 ドロップダウン・メニューを展開するには、Superfish モジュールを使用する必要があります。

このチュートリアルでは、以下の手順を実行します。
  1. メイン・ナビゲーション・メニューにメニュー・リンクを追加します。
  2. Superfish モジュールを使用してドロップダウン・メニューを展開します。

変更が行われる前に、フロントページ Main navigation が次のように表示されます。 元のフロントページのスクリーン・ショット

メイン・ナビゲーション・メニューへのメニュー・リンクの追加

  1. 開発者ポータル に管理者としてログインします。
  2. 構造 > メニューに移動する。
  3. タイトルリストからMain navigationを見つける。 Editメニューの横にある矢印アイコンをクリックし、Add linkを選択します。

    ドロップダウンからリンクを追加を選択します

  4. 新しいメニューリンクを追加するには、次の手順を実行します：
    1. Menu link titleフィールドにAPIsと入力する。
    2. Linkフィールドに/apiと入力する。
    3. 表示設定で、拡大表示チェックボックスを選択します。
    4. 「保存」 をクリックして変更を保存します。

      新しいメニューリンクを追加するページ

      重要 拡張して表示チェックボックスが選択されていることを確認してください。
  5. メインナビゲーションメニューに別のメニューリンクを追加するには、次の手順を実行します：
    1. メニューの編集 メインナビゲーションページで、+リンクの追加をクリックします。
    2. Menu link titleフィールドにAPI Oneと入力する。
    3. Linkフィールドに/product/10/api/5と入力する。
    4. 親リンクで、--APIを選択します。
    5. 「保存」 をクリックして変更を保存します。

      API Oneを追加するページ

  6. メインナビゲーションメニューに別のメニューリンクを追加するには、次の手順を実行します：
    1. メニューの編集 メインナビゲーションページで、+リンクの追加をクリックします。
    2. Menu link titleフィールドにAPI Twoと入力する。
    3. Linkフィールドに/product/10/api/9と入力する。
    4. 親リンクで、--APIを選択します。
    5. 表示設定の重さフィールドで1を選択します。
    6. 保存 をクリックします。

      API Twoを追加するページ

  7. メニューリンクの階層は次のようになった：

    メインナビゲーションのメニューリンクの順序を表示します

  8. ホーム・ページにナビゲートします。 メインナビゲーションメニューに追加したAPIsメニューリンクは表示されますが、サブメニューのリンクはカーソルを合わせても展開されません。API のリンクを含むメインメニュー

Superfish モジュールを使用したドロップダウン・メニューの展開

ドロップダウン・メニューの上にカーソルを移動したときにドロップダウン・メニューを展開するには、 Superfish モジュールを使用して Block Layoutを構成する必要があります。

  1. Extend > Extendに移動します。
  2. Filterフィールドにsuperfishと入力し、Superfishチェックボックスを選択する。
  3. モジュールを有効にするには、Enableをクリックします。

    スーパーフィッシュの有効化ページを表示

  4. 構造 > ブロックレイアウトに移動します。
  5. ブロック]で'Main menu見つけ、[設定]の横の矢印アイコンをクリックし、[無効にする]を選択します。

    メインメニューを無効にするページを表示します

  6. ナビゲーションのブロックの配置をクリックし、ボックス内でmain navigationを検索します。 フィルターに掛けられた結果が、複数のオプションを表示する場合があります。 カテゴリー Superfishを持つ Main navigation の 「ブロックの配置」 をクリックします。

    コンテンツ・ブロック・ページを表示

  7. Display titleのチェックボックスをクリアし、ブロックを保存をクリックします。

    コンフィギュア・ブロックを表示

  8. Main navigation を Site brandingの下にドラッグします。

    メイン・ナビゲーション・ブロックのスクリーンショット

  9. ブロックを保存をクリックして変更を保存します。
  10. ホーム・ページにナビゲートします。 メイン・ナビゲーション・メニューに追加した APIs メニュー・リンクは、その上にカーソルを移動すると展開されるようになりました。

    更新による最終的なメインメニューの表示

このチュートリアルで実行したこと

Main navigation メニューでドロップダウン・メニュー・リンクを作成しました。

次のタスク

開発者ポータルでのユーザー・エクスペリエンスを向上させるために、ドロップダウン・メニューの他の使用を検討することができます。