Agregar un menú desplegable al encabezado de navegación en ArcGIS Hub

Resumen

En un sitio de ArcGIS Hub es posible agregar barras de navegación al encabezado para mejorar la experiencia del usuario al navegar por el sitio. También es posible agregar menús desplegables para organizar enlaces o secciones relacionadas en una barra de navegación principal. En este artículo se muestra el flujo de trabajo para agregar un menú desplegable al encabezado de navegación en un sitio de ArcGIS Hub.

Procedimiento

1. Abra el sitio de ArcGIS Hub en modo de edición. Consulte ArcGIS Hub: Abrir un sitio en modo de edición para obtener instrucciones.
2. En la página del editor del sitio, si es necesario, haga clic en el botón de alternancia Personalizar para abrir el panel lateral.
3. En el panel Personalizar, haga clic en Encabezado.
4. En Apariencia, marque la opción HTML/CSS personalizado. De forma predeterminada, al encabezado se agregan siete barras de navegación.

5. En la sección HTML/CSS personalizado, para HTML, haga clic en el botón Abrir editor de código HTML .
6. Siga los siguientes pasos para agregar un menú desplegable al encabezado.
   1. En el editor de código, navegue hasta la sección <div class="navbar">, resalte toda la fila de una de las etiquetas <li> y reemplace la fila con el siguiente código. En este ejemplo, la primera etiqueta <li> de 'Contacto' se reemplaza con el siguiente código.

<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. Si es necesario, repita el paso 6a para agregar más menús desplegables.
3. Para personalizar el texto de las barras de navegación y la lista de menú desplegable, reemplace el texto que está entre las etiquetas <a> por el texto deseado.
4. Para agregar un enlace personalizado a las barras de navegación y a la lista del menú desplegable, reemplace el # del atributo href de las etiquetas <a> por un enlace.

5. Haga clic en Aplicar para guardar los cambios. Se agrega un menú desplegable personalizado al encabezado de navegación.

7. En la página del editor del sitio, haga clic en Guardar para guardar las modificaciones.
8. Haga clic en la flecha hacia abajo junto a Guardar y, a continuación, haga clic en Publicar borrador para reemplazar el sitio activo por el borrador actual.