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

ドロップダウンメニューやネストされたメニューを作成して使用することで、Developer Portal.NET Framework の利用を向上させることができます。

開始前に

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

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

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

注:

ドロップダウンメニューのリンクは開発者ポータルで作成できますが、ドロップダウンメニューはデフォルトでは展開されません。 ドロップダウン・メニューを展開するには、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チェックボックスをオフにして、「Save block」をクリックする。

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

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

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

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

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

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

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

次のタスク

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