Submenus

Noções Básicas de Menu

No Joomla, três elementos contribuem para a exibição de um menu ao usuário:

• Um Menu é um contêiner para itens de menu.
• Um Item de Menu é um link para uma página do site ou uma página externa.
• Um Módulo de Menu fornece um método para alocar o menu em uma posição na página e controlar aspectos da aparência ou do comportamento do menu ou da página.

Menus simples consistem em listas de links. Às vezes, os membros de uma lista têm relações pai-filho exibidas como filhos indentados ou listas suspensas. As relações pai-filho podem ser aninhadas em qualquer nível. No entanto, aninhar além de dois níveis pode tornar as listas pouco atraentes e difíceis de usar.

Há ocasiões em que você pode querer mostrar os filhos de um menu pai como um submenu separado. Um caso de uso comum é mostrar um submenu à esquerda de uma página, o conteúdo da página no centro e um sumário da página à direita. Este tutorial explica como fazer isso.

Dados de Exemplo

Suponha que você tenha uma série de artigos sobre animais. Pode ser animais de estimação, uma ficha informativa de veterinário ou um zoológico. A seguir está uma estrutura de exemplo curta para fins de demonstração:

Animais
    Gatos
        Burmês
        Azul Russo
    Cães
        Collies
        Spitz Alemão

As listas podem ser bastante longas, então você pode querer exibir apenas uma lista de raças de gatos nas páginas sobre gatos e apenas uma lista de raças de cães nas páginas sobre cães. A captura de tela a seguir mostra a disposição (layout) de destino que o usuário gostaria de alcançar:

Neste exemplo, quando o usuário seleciona o item de menu Animais, a página Animais é carregada e o módulo de submenu Gatos desaparece (o módulo Cães também não aparece). Selecione o item de menu Gatos e o módulo de submenu Gatos aparece ao lado da página Gatos. Selecione o item de menu Burmês e a página Burmês aparece. Selecione o item de menu Cães e o módulo de submenu Gatos é substituído por um módulo de submenu Cães ao lado da página Cães.

Para experimentar este tutorial você mesmo, você precisará criar alguns artigos, um menu com itens de menu e três módulos de menu.

Criar Artigos

Se você for super-eficiente, pode criar um artigo e depois criar um item de menu a partir do artigo. Para isso, você precisaria primeiro criar um novo menu e realizar alguns passos extras durante a criação do artigo. Então, é melhor manter as coisas simples no início e começar com seus novos artigos:

• Selecione Conteúdo → Artigos → + no menu Administrador. Ou selecione o botão Novo na lista de Artigos.
• Preencha o formulário como faria para qualquer artigo.
• Selecione o botão Salvar e novo em vez de Salvar e fechar para passar para o próximo novo artigo.

Os dados de exemplo mostrados acima exigem sete artigos.

Criar um Novo Menu

No menu Administrador:

• Selecione Menus → Gerenciar.
• Na página da lista de Menus, selecione o botão Novo para criar um novo menu.
• No formulário Menus: Adicionar, dê ao menu um título: Animais e um nome único: animals.
• Em alguns casos, você pode precisar se lembrar para que serve este menu. Então, preencha o campo de descrição.
• Salvar ou Salvar e fechar.

Criar Itens de Menu

Há sete itens de menu para criar.

Item de Menu Animals

Os novos itens de menu estarão localizados no menu Animals.

• Selecionar Menus → Animals → + no menu Administrador.
• Preencher o formulário Menu: Editar item.
  • Título: Animals
  • Tipo de Item de Menu: Artigo Único
  • Selecionar Artigo: Animals - este é o artigo pai usado para introduzir a série sobre Animais
  • Menu: Animals
  • Pai: - Nenhum Pai - esta é a raiz do menu
• Selecionar Salvar e novo na lista suspensa de Salvar e fechar.

Item de Menu Cats

Isto é basicamente uma repetição do item de menu Animals. Exceto:

• O título deve ser Cats.
• O artigo selecionado no campo Selecionar Artigo deve ser Cats.
• O Item Pai deve ser definido como Animals.

Item de Menu Burmese

Repita novamente. Exceto:

• O título deve ser Burmese.
• O artigo selecionado no campo Selecionar Artigo deve ser Burmese.
• O Item Pai deve ser definido como Cats.

Mais Itens de Menu

Continue até ter sete itens de menu, um para cada artigo.

Lista de Itens de Menu

Depois de criar todos os seus itens de menu, verifique se eles têm as relações pai-filho corretas e se estão na ordem correta. Você pode ordenar pela coluna Ordem (a segunda coluna) e usar as alças de arrastar (reticências verticais) para arrastar os itens até a ordem correta. Se algum item tiver um pai errado, basta selecionar o título do item e alterar o pai no formulário Menus: Editar item.

Módulos de Menu

Nesta etapa você já tem um menu, mas ele não tem um módulo para ser atribuído a uma posição na página. Você poderia usar o menu inteiro como um menu padrão ou um menu suspenso. No entanto, o objetivo deste tutorial é demonstrar como criar submenus. Para isso você precisa de três módulos diferentes:

• Um módulo Animals para um submenu com itens de menu sobre Animals, Cats e Dogs.
• Um módulo Cats para um submenu com itens de menu sobre raças de gatos.
• Um módulo Dogs para um submenu com itens de menu sobre raças de cães.

Módulo de Submenu Animals

No menu Administrador:

• Selecionar Conteúdo → Módulos do Site → + ou selecionar Novo na lista de Módulos (Site).
• Selecionar o módulo Menu.
• No formulário Módulos: Editar Menu, insira os seguintes dados:
  • Título: Animals
  • Selecionar Menu: Animals
  • Item Base: Animals (este é o item de menu pai)
  • Nível Inicial: 1
  • Nível Final: 2 (isso limita os itens aos itens de menu sobre Cats e Dogs)
  • Posição: sidebar-left (ou onde for mais conveniente para você)

Atribuição de Menu de Animals

Os submenus normalmente são exibidos apenas nas páginas onde são relevantes, neste caso em apenas três páginas. Na aba Atribuição de Menu:

• Defina o campo Atribuição de Módulo como Somente nas páginas selecionadas. Isso revela uma lista hierárquica de todos os itens em todos os menus.
• Marque as caixas de Animals, Cats e Dogs.
• Marque as caixas das raças de gatos e cães. Caso contrário, o submenu Animals desaparecerá nas páginas sobre raças.
• Certifique-se de que nenhuma outra caixa esteja marcada.
• Salvar e fechar

Módulo de Submenu Cats

Isso é bem semelhante:

• Selecionar Conteúdo → Módulos do Site → + ou selecionar Novo na lista de Módulos (Site).
• Selecionar o módulo Menu.
• No formulário de edição Módulos: Menu, insira os seguintes dados:
  • Título: Cats
  • Selecionar Menu: Animals
  • Item Base: Cats (este é o item de menu pai)
  • Nível Inicial: 3
  • Nível Final: Tudo
  • Posição: sidebar-left (ou a que lhe convier)

Atribuição de Menu Cats

A partir da Atribuição de Menu

• Defina o campo Atribuição de Módulo como Somente nas páginas selecionadas. Isso revela uma lista hierárquica de todos os itens em todos os menus.
• Marque as caixas de Cats, Burmese e Russian Blue. Certifique-se de que nenhuma outra caixa esteja marcada.
• Salvar e fechar

Módulo de Submenu Dogs

Mais do mesmo ...

Pseudônimo ('alias') de Item de Menu

Até aqui, tudo bem! Mas não há nenhum link para a página Animals a partir do Main Menu, nem de nenhum dos outros menus do site. A maneira fácil de corrigir isso é com um Pseudônimo ('alias') de Item de Menu. Neste exemplo, uma entrada é feita no menu no topo da página, intitulado Main Menu Blog. No menu do Administrador:

• Selecionar Menus → Main Menu Blog (ou o menu de site de sua preferência).
• Selecionar o botão Novo na Barra de Ferramentas.
• Preencha o formulário Menus: Editar Item
  • Título: Animals
  • Pseudônimo: creatures - já existe um item de menu chamado Animals, portanto você deve usar um pseudônimo diferente.
  • Tipo de Item de Menu: Pseudônimo ('alias') de Item de Menu
  • Item de Menu: Animals - selecionado na lista de itens de menu existentes.

• Salvar
• Ordem - após salvar, a ordem pode ser alterada. Neste exemplo, ele é colocado em primeiro lugar.

Verifique o Resultado

Visualize as páginas do seu site. Neste exemplo, a maioria das páginas não mostrará os submenus na posição lateral esquerda. O link Animals no menu superior abrirá a página animals, a partir da qual é possível navegar para as páginas Cats ou Dogs: