Construa um Mega Menu com Ultimenu e Bootstrap no Drupal 8

Publicados: 2022-02-16

Um de nossos clientes perguntou como construir um mega menu no Drupal 8.

Mega menus são menus com navegação em várias colunas. Eles estão rapidamente se tornando uma tendência em web design.

O módulo Ultimenu permite inserir blocos Drupal em um menu. Você pode usá-lo facilmente para criar layouts de menu bastante complexos.

Neste tutorial, você aprenderá a construir um mega menu simples usando o módulo Ultimenu e o Bootstrap.

O cliente pretendia construir um mega menu semelhante ao da imagem abaixo:

Os menus suspensos do mega devem ter 100% de largura. Seu conteúdo deve ser blocos Drupal.

A Abordagem Ultimenu

O módulo Ultimenu gera um bloco para cada menu que você adiciona na página de menus de sua instalação do Drupal (admin/estrutura/menu).

Você pode colocar este bloco na tela de layout do bloco como qualquer outro bloco. O módulo transforma itens de menu em regiões dinâmicas na página de layout de bloco.

Dessa forma, você pode inserir blocos (blocos personalizados, visualizações, etc) nessas regiões.

Um bloco contendo regiões contendo blocos:

Passo 1. Instale o módulo

Instale o módulo com o composer:

composer require drupal/ultimenu

Após o download, clique em Extend e habilite o módulo. Não são necessárias mais dependências:

Passo 2. Crie o cardápio

Clique em Estrutura > Menus .
Procure a navegação principal
Clique no menu Editar .

Clique no botão Adicionar link
Adicione os itens de menu do primeiro nível:

O link Viagem aponta para a route:<nolink> . Este elemento pai existe apenas para conter outros elementos:

Etapa 3. Configurar o bloco Ultimenu

Clique em Estrutura > Ultimenu .
Seleção de guia Navegação principal nos blocos verticais Ultimenu
Clique em Salvar configuração :

Clique em regiões Ultimenu.
Selecione Ultimenu:main: Viagem

O Ultimenu criará esta região dinamicamente na página Block Layout , para que você possa colocar blocos nela.

Clique em Salvar configuração :

A aba de itens do Ultimenu tem opções de configuração adicionais. Não vou verificar nenhuma dessas opções. Por favor, leia a documentação do módulo para entender como essas opções funcionam, especialmente se você estiver construindo um site multilíngue.

Passo 4. O bloco de imagem

Para colocar uma imagem em um bloco, você precisa criar um tipo de bloco personalizado com o campo Imagem .

Clique em Estrutura > Layout de bloco > Biblioteca de blocos personalizados > Tipos de bloco .
Clique no botão Adicionar tipo de bloco personalizado :

Dê ao tipo de bloco um nome próprio.
Clique em Salvar:

Clique em Gerenciar campos.
Exclua o campo Corpo .
Clique em Adicionar campo.
Adicione o campo Imagem .
Salve -o com os padrões.
Clique em Gerenciar exibição.
Oculte o rótulo do bloco :

Clique em Estrutura > Layout de bloco > Biblioteca de blocos personalizados > Adicionar bloco personalizado :

Clique em Bloquear com Imagem :

Carregue uma imagem.
Clique em Salvar:

Passo #5. O bloco de links

Existem muitas maneiras de obter um bloco com links em quatro colunas, por exemplo com Views.

Estou trabalhando com um subtema Bootstrap neste tutorial. Vou usar um bloco básico com marcação e classes do Bootstrap.

Confira este tutorial para aprender como criar um subtema Bootstrap no Drupal.

Clique em Adicionar bloco personalizado novamente.
Selecione Bloco básico desta vez.
Dê ao bloco um nome próprio.
Selecione Full HTML como formato de texto no editor.
Clique no botão Origem .
Cole o seguinte código na janela do editor:

 <div class="row"> <div class="col-sm-3"> <h3>Top destinations</h3> <ul> <li><a href="#">North America</a></li> <li><a href="#">Latin America</a></li> <li><a href="#">Middle East</a></li> <li><a href="#">Europe</a></li> <li><a href="#">Africa</a></li> </ul> </div> <div class="col-sm-3"> <h3>Editor's choice</h3> <ul> <li><a href="#">Best Hotel Deals</a></li> <li><a href="#">Cruise Deals</a></li> <li><a href="#">City Breaks</a></li> <li><a href="#">Activities</a></li> <li><a href="#">Culture</a></li> </ul> </div> <div class="col-sm-3"> <h3>City breaks</h3> <ul> <li><a href="#">Paris</a></li> <li><a href="#">Hong Kong</a></li> <li><a href="#">Rome</a></li> <li><a href="#">London</a></li> <li><a href="#">Tokyo</a></li> </ul> </div> <div class="col-sm-3"> <h3>Custom menu</h3> <ul> <li><a href="#">Disclaimer</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Advertisement</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </div>

Clique em Salvar.

Passo #6. Coloque o bloco Ultimenu

Clique em Estrutura > Layout de bloco .
Desative o bloco de navegação principal padrão.
Coloque o Ultimenu: Navegação principal na região de Navegação (desmontável).
Desmarque Exibir título .
Clique em Salvar bloco .

Passo #7. Coloque os blocos na região “Travel”

Role para baixo até a parte inferior da página.

Você verá a região gerada dinamicamente que você atribuiu ao configurar seu Ultimenu.

Clique em Colocar bloco :

Coloque o bloco personalizado de imagem nesta região.
Desmarque Exibir título.
Clique em Salvar bloco.
Repita o processo com o bloco de marcação Bootstrap :

Reorganize a ordem dos blocos, se necessário.
Clique em Salvar blocos :

Agora vá para a página inicial do seu site e dê uma olhada no menu. Alguns ajustes de CSS são necessários.

Passo #8. O CSS

Por padrão, o arquivo de bibliotecas do seu subtema aponta para o arquivo style.css dentro da pasta css/ dentro do seu subtema Bootstrap.

Adicione o seguinte código a esse arquivo:

 /* Google fonts */ @import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); /* Menu Links */ .ultimenu__link { text-transform: uppercase; font-family: 'Roboto', sans-serif; color: #000; font-size: 1.1em; display: inline-block; font-weight: 700; padding: 0.8em; } .has-ultimenu:hover { background-color: #FFF; } /* Image Block */ #block-megamenuimage { width: 100%; } #block-megamenuimage img { width: 100%; } /* Links block */ #block-multicolumnblock { width: 100%; } #block-multicolumnblock h3 { text-transform: uppercase; font-family: 'Roboto', sans-serif; background: #000; color: beige; font-size: 1em; display: inline-block; font-weight: 700; padding: 0.8em; border-radius: 10px; } #block-multicolumnblock li { list-style: none; border-top: 0.5px dashed #333; } #block-multicolumnblock li:last-child { border-bottom: 0.5px dashed #333; } #block-multicolumnblock li a { text-decoration: none; color: #333; display: block; line-height: 2.5em; }

Até agora você já deve ter notado como ajustar o menu sozinho:

Resumo

Você acabou de aprender como construir megamenus no Drupal usando o módulo Ultimenu, Bootstrap e uma abordagem de “bloco Drupal” fácil de entender.

Obrigado por ler!