Tutorial: Criando um link de menu suspenso

É possível criar e utilizar menus suspensos, ou menus aninhados, para aprimorar o uso do Portal do Desenvolvedor .

Antes de iniciar

Você deve ter um Portal do Desenvolvedor ativado e deve ter acesso de administrador para concluir este tutorial. O tutorial Criando o Portal explica como ativar o portal se ainda não tiver feito isso.

Sobre este Tutorial

Neste tutorial, você cria um link de menus suspensos no menu Main navigation

Nota:

Embora os links do menu suspenso possam ser criados no Developer Portal, o menu suspenso não se expande por padrão. Para fazer com que o menu suspenso se expanda, você precisa usar o módulo Superfish.

Este tutorial leva você pelas etapas a seguir:
  1. Incluir links de menu para o menu de navegação principal
  2. Faça o menu suspenso expandir usando o módulo Superfish.

A primeira página Main navigation é exibida assim antes das mudanças serem feitas. Uma captura de tela da primeira página original

Incluir links de menu no menu de navegação principal

  1. Efetue login no Portal do Desenvolvedor como administrador.
  2. Navegue até Estrutura > Menus.
  3. Na lista de títulos, localize Main navigation. Clique no ícone de seta ao lado do menu Editar e selecione Adicionar link.

    Selecione Add link (Adicionar link) no menu suspenso

  4. Conclua as etapas a seguir para adicionar um novo link de menu:
    1. No campo Menu link title, digite APIs.
    2. No campo Link, digite /api.
    3. Em Configurações de exibição, marque a caixa de seleção Mostrar como expandido.
    4. Clique em Salvar para salvas as mudanças.

      Página para adicionar um novo link de menu

      Importante: Certifique-se de que a caixa de seleção Mostrar como expandido esteja marcada, pois esse é o link pai dos links de submenu.
  5. Conclua as etapas a seguir para adicionar outro link de menu ao menu de navegação principal:
    1. Na página Editar menu Navegação principal, clique em +Adicionar link.
    2. No campo Menu link title, digite API One.
    3. No campo Link, digite /product/10/api/5.
    4. Em Link pai, selecione -- APIs.
    5. Clique em Salvar para salvas as mudanças.

      Página para adicionar a API One

  6. Conclua as etapas a seguir para adicionar outro link de menu ao menu de navegação principal:
    1. Na página Editar menu Navegação principal, clique em +Adicionar link.
    2. No campo Menu link title, digite API Two.
    3. No campo Link, digite /product/10/api/9.
    4. Em Link pai, selecione -- APIs.
    5. Em Configurações de exibição, selecione 1no campo Peso.
    6. Clique em Salvar.

      Página para adicionar a API Dois

  7. A hierarquia dos links do menu agora tem a seguinte aparência:

    Exibe a ordem dos links de menu para a navegação principal

  8. Navegue para a página inicial. O link do menu APIs que você adicionou ao menu de navegação principal é exibido, mas os links dos submenus não se expandem quando você passa o mouse sobre ele. Menu principal com link da API

Faça o menu suspenso expandir usando o módulo Superfish

Para que o menu suspenso seja expandido ao passar o mouse sobre ele, é necessário usar o módulo Superfish e configurar o Block Layout.

  1. Navegue até Extend > Extend.
  2. No campo Filter, digite superfish e marque a caixa de seleção Superfish.
  3. Clique em Enable para ativar o módulo.

    Mostra a página de ativação do superfish

  4. Navegue até Estrutura > Layout de bloco.
  5. Em Block (Bloqueio), localize ' Main menu, clique no ícone de seta ao lado de Configure (Configurar) e selecione Disable (Desativar).

    Mostra a página para desativar o menu principal

  6. Clique em Place block para Navegação e procure por main navigation na caixa. Os resultados filtrados podem mostrar duas ou mais opções. Clique em Colocar bloco para Main navigation com a Categoria Superfish.

    Mostra a página do bloco de conteúdo

  7. Desmarque a caixa de seleção Display title e clique em Salvar bloco.

    Mostra o bloco de configuração

  8. Arraste Main navigation para estar abaixo de Site branding

    Captura de tela do bloco de navegação principal

  9. Clique em Save blocks para salvar as alterações.
  10. Navegue para a página inicial. O link do menu APIs que você incluiu no menu de navegação principal agora expande quando você passa o mouse sobre ele.

    mostrar o menu principal final com a atualização

O Quê foi Feito Neste Tutorial

Você criou um link de menu suspenso no menu Main navigation ..

O quê fazer em seguida

É possível considerar quaisquer outros usos do menu suspenso para aprimorar sua experiência de usuários no Portal do Desenvolvedor.