Como Criar um Menu Aninhado Recolhível Móvel com o Divi's Theme Builder

Um tempo atrás, compartilhamos um hack de menu móvel que ajuda a criar um menu aninhado em colapso. Sabemos que muitos de vocês o usaram, mas com o novo Divi Theme Builder, a abordagem se torna um pouco diferente. No tutorial de hoje, mostraremos como aplicar um efeito de recolhimento móvel ao Módulo de Menu dentro do Divi Theme Builder. Existem três partes principais neste tutorial:

• Configurando seu menu e atribuindo as classes corretas para seus itens de menu
• Construindo seu menu usando o Theme Builder e o Módulo de Menu
• Adicionando o código personalizado dentro do Theme Builder

Você também poderá baixar o arquivo JSON de modelo gratuitamente! Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Móvel

Área de Trabalho

Baixe o Global Header Design GRATUITAMENTE

Importante: depois de baixar e enviar o arquivo JSON para o seu criador de tema, você ainda precisará configurar manualmente seu menu com as classes CSS corretas + adicionar o Módulo de Código com o código CSS e JQuery (etapas 1 e 3 desta postagem) .

Para colocar suas mãos no menu aninhado em colapso gratuito, primeiro você precisará baixá-lo usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Inscreva-se no nosso canal no Youtube

1. Configure o seu menu

Adicionar itens de menu e itens de submenu

A primeira coisa que você precisa fazer é criar seu menu. Adicione os subitens de sua escolha.

Adicionar opção de classe CSS

Depois de adicionar os itens de menu, você pode habilitar a opção de classes CSS clicando em 'Opções de tela' e habilitando 'Classes CSS'.

Adicionar classe CSS a itens de menu de primeiro nível contendo itens de submenu

Continue adicionando uma classe CSS aos itens de menu de primeiro nível que contêm itens de submenu. Neste exemplo, isso significa adicionar a classe CSS aos itens de menu 'Serviço' e 'Portfólio'.

• Classes CSS: primeiro nível

Adicionar classe CSS aos itens do menu de segundo nível e Salvar menu

Em seguida, atribua uma classe CSS diferente aos itens de menu de segundo nível em seu menu. Certifique-se de adicionar essa classe CSS apenas aos itens de menu de segundo nível (caso esteja adicionando mais níveis). Posteriormente neste tutorial, usaremos esta classe CSS e aquela que atribuímos aos itens de menu de primeiro nível para criar o menu aninhado em colapso.

• Classes CSS: segundo nível

2. Vá para Divi Theme Builder e comece a construir o cabeçalho global

Vá para Divi Theme Builder

A próxima parte deste tutorial se concentra na criação do design do cabeçalho. Se você quiser fazer com que a técnica aninhada se aplique a um cabeçalho que você já construiu (usando o Módulo de Menu), você pode pular esta etapa e ir para a última parte do tutorial. Se você deseja recriar o design, continue seguindo as etapas. Vá para o Divi Theme Builder.

Comece a construir o cabeçalho global

Comece a construir seu cabeçalho global a seguir.

Configurações da seção

Espaçamento

Dentro do editor de template, você notará uma seção. Abra essa seção e remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Índice Z

Aumente o índice z da seção também.

• Índice Z: 99999

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e permita que a linha ocupe toda a largura da tela.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Elemento Principal

Certifique-se de que todos os módulos apareçam lado a lado em tamanhos de tela menores, adicionando uma única linha de código CSS ao elemento principal da linha também.

display: flex;

Coluna 1

Espaçamento

Em seguida, abra as configurações da coluna 1 e adicione algum preenchimento personalizado superior e inferior.

• Enchimento superior: 20 px
• Preenchimento inferior: 20 px

Fronteira

Adicione algum raio de borda também.

• Superior direito: 100px
• Inferior direito: 100px

Sombra da caixa

E complete as configurações da coluna 1 adicionando uma sombra de caixa sutil.

• Posição horizontal da sombra da caixa: 20 px
• Força do desfoque de sombra da caixa: 50 px
• Cor da sombra: rgba (0,0,0,0.15)

Coluna 2

Espaçamento

Abra as configurações da segunda coluna a seguir e adicione algum preenchimento superior e inferior.

• Enchimento superior: 20 px
• Preenchimento inferior: 20 px

Coluna 3

Fundo Gradiente

Passe para a próxima e última coluna. Adicione um fundo gradiente.

• Cor 1: # 26c699
• Cor 2: # abe02f
• Direção do gradiente: 116deg

Espaçamento

Adicione um pouco de preenchimento personalizado superior e inferior a seguir.

• Enchimento superior: 20 px
• Preenchimento inferior: 20 px

Fronteira

Em seguida, vá para as configurações de borda e faça as seguintes alterações:

• Superior esquerdo: 100px
• Inferior esquerdo: 100px

Sombra da caixa

Conclua as configurações da coluna adicionando uma sombra de caixa.

• Posição horizontal da sombra da caixa: -26px
• Posição vertical da sombra da caixa: 0 px
• Cor da sombra: # d2ff0c

Adicionar Módulo de Imagem à Coluna 1

Carregar logotipo

É hora de adicionar módulos, começando com um Módulo de imagem na coluna 1. Faça upload do seu logotipo.

Alinhamento

A seguir, altere o alinhamento da imagem do módulo.

• Alinhamento de imagem: centro

Dimensionamento

Conclua as configurações do módulo alterando a largura em diferentes tamanhos de tela.

• Largura: 120 px (desktop), 80 px (tablet e telefone)

Adicionar Módulo de Menu à Coluna 2

Selecione o menu

Na coluna 2, o único módulo de que precisamos é um Módulo de Menu. Selecione o menu que você criou na primeira parte deste tutorial.

Remover cor de fundo

Em seguida, remova a cor de fundo do módulo.

Layout

Em seguida, altere as configurações de layout.

• Estilo: centrado
• Direção do menu suspenso: para baixo

Texto do Menu

Defina também o estilo do texto do menu.

• Fonte do menu: Montserrat
• Peso da fonte do menu: médio
• Cor do texto do menu: # 000000
• Tamanho do texto do menu: 13px
• Espaçamento entre letras do menu: 1px

Menu suspenso

Continue alterando algumas cores nas configurações do menu suspenso.

• Cor de fundo do menu suspenso: #ffffff
• Cor da linha do menu suspenso: # 000000

Ícones

E conclua as configurações do módulo alterando a cor do ícone do menu de hambúrguer nas configurações dos ícones.

• Cor do ícone do menu de hambúrguer: # 000000

Adicionar Módulo de Texto à Coluna 3

Adicionar conteúdo

Vá para o próximo e último módulo, que é um Módulo de Texto na coluna 3. Adicione alguma cópia de sua escolha.

Adicionar Link

Adicione um link para o próximo módulo.

• URL do link do módulo: #

Configurações de texto

Vá para a guia de design e altere as configurações de texto de acordo:

• Fonte do texto: Montserrat
• Peso da Fonte do Texto: Semi Negrito
• Cor do texto: #ffffff
• Tamanho do texto: 16px
• Altura da linha de texto: 1em
• Alinhamento de Texto: Centro

Espaçamento

Conclua as configurações do módulo adicionando alguma margem superior.

• Margem superior: 10px

3. Adicionar funcionalidade ao menu usando um módulo de código

Adicionar Módulo de Código à Coluna 2

Depois de concluir o design de seu cabeçalho, é hora de adicionar o código personalizado que transformará o menu móvel em um menu aninhado em colapso. Adicione um Módulo de Código à segunda coluna (ou em qualquer outro lugar).

Inserir código CSS e JQuery

Em seguida, adicione o código CSS e JQuery. Certifique-se de colocar o código CSS entre as tags de estilo e o código JQuery entre as tags de script.

.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '\4d';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}
.et_mobile_menu {
margin-top: 20px;
width: 230%;
margin-left: -65%;
}

(function($) {
      
function setup_collapsible_submenus() {
    
var FirstLevel = $('.et_mobile_menu .first-level > a');
  
FirstLevel.off('click').click(function() {
$(this).attr('href', '#');  
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
  

}
      
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
 
})(jQuery);

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Móvel

Área de Trabalho

Pensamentos finais

Nesta postagem, mostramos como fazer um menu aninhado recolhível se aplicar ao seu cabeçalho global dentro do Theme Builder. Começamos criando a barra de menu principal, continuamos projetando nosso cabeçalho dentro do Theme Builder usando o Módulo de Menu e concluímos o tutorial adicionando o código personalizado que faz o efeito funcionar. Esperamos que você tenha gostado deste tutorial e se você tiver alguma dúvida, fique à vontade para deixar um comentário na seção de comentários abaixo!

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.