Tutoriel : Création d'un lien de menu déroulant

Vous pouvez créer et utiliser des menus déroulants ou des menus imbriqués pour améliorer l'utilisation de votre portail de développeur .

Avant de commencer

Un portail de développeur doit être activé et vous devez disposer d'un accès administrateur pour exécuter ce tutoriel. Le tutoriel Création du portail explique comment activer le portail si vous ne l'avez pas déjà fait.

A propos de ce tutoriel

A l'aide de ce tutoriel, vous créez un lien de menu déroulant dans le menu Main navigation.

Remarque :

Bien qu'il soit possible de créer des liens vers des menus déroulants dans le Portail du développeur, le menu déroulant ne se développe pas par défaut. Pour faire en sorte qu'il se développe, vous devez utiliser le module Superfish.

Ce tutoriel vous guide à travers les étapes suivantes :
  1. Ajoutez des liens de menu au menu de navigation principal.
  2. Développer le menu déroulant à l'aide du module Superfish.

La page de garde Main navigation s'affiche de la sorte avant que les modifications ne soient apportées. Une capture d'écran de la page d'accueil originale

Ajout de liens de menu dans le menu de navigation principale

  1. Connectez-vous à votre portail de développeur en tant qu'administrateur.
  2. Naviguez jusqu'à Structure > Menus.
  3. Dans la liste des titres, recherchez Main navigation. Cliquez sur l'icône en forme de flèche à côté du menu Editer et sélectionnez Ajouter un lien.

    Sélectionnez Ajouter un lien dans le menu déroulant

  4. Suivez les étapes suivantes pour ajouter un nouveau lien de menu :
    1. Dans le champ Menu link title, entrez APIs.
    2. Dans le champ Link, entrez /api.
    3. Sous Paramètres d'affichage, cochez la case Afficher comme développé.
    4. Cliquez sur Enregistrer pour enregistrer les changements.

      Page pour ajouter un nouveau lien de menu

      Important: Assurez-vous que la case Afficher comme développé est cochée car il s'agit du lien parent pour les liens du sous-menu.
  5. Suivez les étapes suivantes pour ajouter un autre lien de menu au menu de navigation principal :
    1. Sur la page Editer le menu Navigation principale, cliquez sur +Ajouter un lien.
    2. Dans le champ Menu link title, entrez API One.
    3. Dans le champ Link, entrez /product/10/api/5.
    4. Sous Lien parent, sélectionnez -- APIs.
    5. Cliquez sur Enregistrer pour enregistrer les changements.

      Page pour ajouter API One

  6. Suivez les étapes suivantes pour ajouter un autre lien de menu au menu de navigation principal :
    1. Sur la page Editer le menu Navigation principale, cliquez sur +Ajouter un lien.
    2. Dans le champ Menu link title, entrez API Two.
    3. Dans le champ Link, entrez /product/10/api/9.
    4. Sous Lien parent, sélectionnez -- APIs.
    5. Sous Paramètres d'affichage, sélectionnez 1 dans le champ Poids.
    6. Cliquez sur Sauvegarder.

      Page d'ajout de l'API Deux

  7. La hiérarchie des liens du menu se présente désormais comme suit :

    Affiche l'ordre des liens du menu pour la navigation principale

  8. Accédez à la page d'accueil. Le lien de menu APIs que vous avez ajouté au menu de navigation principal apparaît, mais les liens des sous-menus ne se développent pas lorsque vous passez la souris dessus. Menu principal avec le lien de l'API

Possibilité de développer le menu déroulant à l'aide du module Superfish

Pour que le menu déroulant puisse se développer lorsque vous le survolez avec la souris, vous devez utiliser le module Superfish et configurer Block Layout.

  1. Cliquez sur Extension.
  2. Dans le champ Filter, entrez superfish et cochez la case Superfish.
  3. Cliquez sur Activer pour activer le module.

    Affiche la page d'activation de superfish

  4. Naviguez jusqu'à Structure > Disposition des blocs.
  5. Sous Bloquer, recherchez " Main menu, cliquez sur l'icône en forme de flèche à côté de Configurer et sélectionnez Désactiver.

    Affiche la page permettant de désactiver le menu principal

  6. Cliquez sur Place block pour Navigation et recherchez main navigation dans la boîte. Les résultats filtrés devraient présenter au moins deux options. Cliquez sur Positionner le bloc pour Main navigation avec la catégorie Superfish.

    Affiche la page du bloc de contenu

  7. Décochez la case Display title et cliquez sur Sauvegarder le bloc.

    Affiche le bloc de configuration

  8. Faites glisser Main navigation sous Site branding.

    Capture d'écran du bloc de navigation principal

  9. Cliquez sur Sauvegarder les blocs pour enregistrer les modifications.
  10. Accédez à la page d'accueil. Le lien de menu APIs que vous avez ajouté dans le menu de navigation principale peut désormais se développer lorsque vous le survolez avec la souris.

    affiche le menu principal final avec la mise à jour

Tâches exécutées dans ce tutoriel

Vous avez créé un lien de menu déroulant dans le menu Main navigation.

Etape suivante

Vous pouvez envisager d'autres utilisations du menu déroulant pour améliorer l'expérience de vos utilisateurs sur votre portail de développeur.