Adicionar um menu suspenso ao cabeçalho de navegação no ArcGIS Hub

Resumo

Em um site do ArcGIS Hub, as barras de navegação podem ser adicionadas ao cabeçalho para melhorar a experiência do usuário ao navegar no site. Menus suspensos também podem ser adicionados para organizar links ou seções relacionadas em uma barra de navegação principal. O fluxo de trabalho para adicionar um menu suspenso ao cabeçalho de navegação em um site do ArcGIS Hub é demonstrado neste artigo.

Procedimento

1. Abra o site do ArcGIS Hub no modo de edição. Consulte ArcGIS Hub: Abrir um site no modo de edição para instruções.
2. Na página de editor do site, se necessário, clique em Personalizar Alternância para abrir o painel lateral.
3. No painel Personalizar , clique em Cabeçalho.
4. Em Aparência, marque a opção HTML/CSS Personalizado . Sete barras de navegação são adicionadas ao cabeçalho por padrão.

5. Na seção HTML/CSS Personalizado , para HTML, clique no botão Abrir editor de código HTML.
6. Siga as etapas abaixo para adicionar um menu suspenso ao cabeçalho.
   1. No editor de código, navegue até a seção <div class="navbar">, destaque toda a linha de uma das tags <li> e substitua a linha pelo código abaixo. Neste exemplo, a primeira tag <li> para "Contato" é substituída pelo código abaixo.

<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. Repita a Etapa 6a para adicionar mais menus suspensos, se necessário.
3. Para personalizar o texto das barras de navegação e da lista do menu suspenso, substitua o texto entre as tags <a> pelo texto desejado.
4. Para adicionar um link personalizado às barras de navegação e à lista de menus suspensos, substitua o # no atributo href nas tags <a> por um link.

5. Clique em Aplicar para salvar suas alterações. Um menu suspenso personalizado é adicionado ao cabeçalho de navegação.

7. Na página de editor do site, clique em Salvar para salvar as modificações.
8. Clique na seta para baixo ao lado de Salvar e clique em Publicar Rascunho para substituir o site ativo pelo rascunho atual.