Como usar o módulo Extras de itens de menu para Drupal 8

Os mega menus não são mais uma tendência de design, mas uma parte essencial da maioria dos sites relacionados a notícias ou comércio eletrônico.

O módulo Extras de itens de menu para Drupal 8 melhora o sistema de menu padrão no Drupal, permitindo que o construtor de sites adicione campos aos itens de menu. Dessa forma, é possível criar um mega menu com alguns passos simples.

Acompanhe para saber como usar este módulo. Vamos começar!

Etapa 1: Instale os módulos necessários

Além do módulo Extras de itens de menu, você precisará instalar o Viewfield. Viewfield fornece um campo que contém uma referência a uma View e a renderiza sempre que a entidade que contém o campo é exibida.

• Abra o aplicativo de terminal do seu PC.
• Tipo :
  • compositor requer drupal/viewfield
  • compositor requer drupal/menu_item_extras

Habilite ambos os módulos após o download.

• Clique em Estender.
• Verifique ambos os módulos.
• Clique em Instalar.

Passo #2: Crie um Sistema de Taxonomia

Talvez a palavra “sistema” não seja muito apropriada, pois criaremos apenas um vocabulário com dez termos associados. No entanto, este exemplo explicará o básico, para que você possa trabalhar com sistemas de taxonomia mais complicados no futuro.

• Clique em Estrutura > Taxonomia > Adicionar vocabulário.
• Digite o nome “Tópicos” e clique em Salvar.
• Clique em Adicionar termo e adicione todos os termos detalhados abaixo um por um.
  • Tópicos
    • D8
    • Symfony
    • WP
    • Magento
    • CSS
    • HTML
    • JS
    • PHP
    • Pitão
    • DevOps

Etapa 3: criar os tipos de conteúdo

Para o propósito deste tutorial, vamos usar 2 tipos de conteúdo com os seguintes campos:

• Serviços
  • Imagem de serviço/imagem/número permitido de valores: 1
  • Texto de introdução / Texto (formatado) / Número permitido de valores: 1
  • Descrição / Campo padrão

• Blogue
  • Categoria / Termo de taxonomia / Número permitido de valores: ilimitado
  • Descrição / Campo padrão

Certifique-se de selecionar o Tipo de referência (Tópicos) ao criar o campo Taxonomia.

Etapa 4: criar conteúdo

Vamos criar 3 nós do tipo Service:

• Tutoriais
• Vídeos
• Livros

Cada um desses nós será associado a um elemento de segundo nível no mega menu. Por outro lado, vamos criar cerca de 10 nós do tipo Blog com diferentes termos associados a eles. Certifique-se de incluir 2 dos termos (ex.: D8, WP) com mais frequência do que os outros.

A tela Conteúdo deve ficar mais ou menos parecida com a imagem abaixo ao final deste processo.

Etapa 5: crie os itens de menu

O primeiro nível do menu principal terá os seguintes itens de menu:

• Casa
• Cerca de
• Recursos
• Contato

Cada um dos itens do menu terá um campo adicional (extra). Este campo será definido no segundo nível do menu, ou seja, cada um dos itens do cartão no mega menu. Este campo nos permitirá apresentar cada um dos blocos de visualização.

• Clique em Estrutura > Menus.
• Clique no menu Editar para editar a navegação principal.

• Clique em Adicionar link 3 vezes para adicionar os itens de menu de primeiro nível ausentes.
• Clique em Salvar sempre que inserir um nome de item de menu.

Use a tag especial para exibir apenas o texto do link.

Depois de criar e reorganizar os links do seu menu,

• Clique em Gerenciar campos > Adicionar campo, para adicionar um campo aos itens de menu.
• Selecione um campo do tipo Viewfield.
• Dê -lhe um nome e um rótulo apropriados.
• Clique em Salvar e continuar.

• Defina o número permitido de valores como ilimitado.
• Clique em Salvar configurações de campo

Você terá a opção de vincular uma visualização padrão a esse campo específico. Deixe esses campos vazios.

• Role para baixo e clique em Salvar configurações
• Clique em Gerenciar exibição.

• Oculte o rótulo do cartão de menu.
• Clique em Salvar.

Etapa 6: criar as visualizações

• Clique em Estrutura > Visualizações > Adicionar visualização
• Mostrar conteúdo do tipo Serviços.
• Crie um bloco com uma lista não formatada de campos.
• Escolha mostrar 3 itens por bloco.
• Clique em Salvar e editar.

• Adicione o campo de imagem do serviço
• Defina o estilo da imagem como Miniatura e vincule a imagem ao Conteúdo.
• Clique em Aplicar

• Adicione também o campo de texto Intro.
• Reorganize os campos.
• Clique em Salvar.

• Clique em Estrutura > Visualizações > Adicionar visualização
• Mostrar conteúdo do tipo Blog.
• Crie um bloco com uma lista não formatada de campos.
• Escolha mostrar 1 item por bloco.
• Clique em Salvar e editar.

• Adicione o campo Categoria.
• Clique em Adicionar e configurar campos.
• Clique nas configurações de vários campos.
• Selecione Lista não ordenada.
• Defina o número de valores a serem exibidos para 3.
• Clique em Aplicar.

• Remover o critério de classificação
• Clique em Aplicar.
• Clique em Salvar para salvar a visualização.

Passo #7: Adicione os Blocos de Visualização aos Itens do Menu

• Clique em Estrutura > Menus
• Edite a navegação principal.
• Edite o item de menu Recursos.
• Adicione os 2 blocos que você criou na etapa 5.
• Clique em Salvar.

Passo #8: Os estilos CSS

Não vou explicar esse código em detalhes, pois está fora do escopo deste tutorial. No entanto, você pode pesquisar mais sobre as visualizações do Drupal e a grade CSS neste artigo. Se você quiser praticar mais com mega menus, dê uma olhada neste artigo.

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

Espero que tenham gostado deste tutorial. Obrigado por ler!