ajouter un menu déroulant à l’en-tête de navigation dans ArcGIS Hub

Résumé

Dans un site ArcGIS Hub, des barres de navigation peuvent être ajoutées à l’en-tête pour améliorer l’expérience utilisateur lors de la navigation sur le site. Des menus déroulants peuvent également être ajoutés pour organiser des liens ou des sections connexes sous une barre de navigation principale. Le processus d’ajout d’un menu déroulant à l’en-tête de navigation dans un site ArcGIS Hub est présenté dans cet article.

Procédure

1. Ouvrez le site ArcGIS Hub en mode de mise à jour. Reportez-vous à la rubrique ArcGIS Hub : Ouvrir un site en mode de mise à jour pour obtenir des instructions.
2. Sur la page de l’éditeur de site, si nécessaire, cliquez sur Customize Toggle (Personnaliser) pour ouvrir le volet latéral.
3. Dans la fenêtre Customize (Personnaliser), cliquez sur Header (En-tête).
4. Sous Appearance (Apparence), cochez l’option Custom HTML/CSS (HTML/CSS personnalisé). Par défaut, sept barres de navigation sont ajoutées à l’en-tête.

5. Dans la section Custom HTML/CSS (HTML/CSS personnalisé), pour HTML, cliquez sur le bouton Open HTML code-editor (Ouvrir l’éditeur de code HTML).
6. Procédez comme suit pour ajouter un menu déroulant à l’en-tête.
   1. Dans l’éditeur de code, accédez à la section <div class="navbar">, mettez en surbrillance la ligne entière de l’une des balises <li> et remplacez la ligne par le code ci-dessous. Dans cet exemple, la première balise <li> pour « Contact » est remplacée par le code ci-dessous.

<li class="dropdown">
          <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another action</a>
            </li>
            <li>
              <a href="#">Something else here</a>
            </li>
            <li class="divider" role="separator"></li>
            <li class="dropdown-header">Nav header</li>
            <li>
              <a href="#">Separated link</a>
            </li>
            <li>
              <a href="#">One more separated link</a>
            </li>
          </ul>
        </li>

2. Répétez l’étape 6a pour ajouter d’autres menus déroulants si nécessaire.
3. Pour personnaliser le texte des barres de navigation et de la liste des menus déroulants, remplacez le texte entre les balises <a> par le texte souhaité.
4. Pour ajouter un lien personnalisé aux barres de navigation et à la liste des menus déroulants, remplacez le # dans l’attribut href dans les balises <a> par un lien.

5. Cliquez sur Apply (Appliquer) pour enregistrer les modifications. Un menu déroulant personnalisé est ajouté à l’en-tête de navigation.

7. Sur la page de l’éditeur de site, cliquez sur Save (Enregistrer) pour enregistrer les modifications.
8. Cliquez sur la flèche vers le bas en regard de Save (Enregistrer), puis cliquez sur Publier le brouillon pour remplacer le site actif par le brouillon actuel.