Como construir um menu de hambúrguer animado escalonado com Divi e Anime.js

No passado, compartilhamos diferentes tipos de cabeçalhos que você pode criar com o Divi e o Divi Theme Builder. Na verdade, você pode encontrar todos os tutoriais listados nesta postagem de navegação. Nessa postagem, você notará que mostramos como criar um cabeçalho de tela inteira, mas para ajudá-lo a levar o design do cabeçalho ainda mais longe, mostraremos como criar um menu de hambúrguer animado personalizado também. Existem algumas coisas notáveis ​​sobre o menu de hambúrguer que criaremos:

• Assim que os visitantes clicam no ícone de hambúrguer, um cabeçalho de tela inteira muda e cada item do menu é revelado um por um, dando a ele uma aparência de animação personalizada
• As animações personalizadas são acionadas cada vez que o menu é aberto
• Você também poderá adicionar itens suspensos aos itens do menu principal, que abrem com um clique e fecham automaticamente assim que alguém fecha o menu ou clica em um item de navegação

Em outras palavras, este é definitivamente um tutorial de cabeçalho que o ajudará a adicionar aquela aparência avançada ao seu site. Você também pode estilizar os itens como quiser e poderá baixar o arquivo de modelo JSON gratuitamente!

Vamos lá.

Antevisão

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

Área de Trabalho

Móvel

Baixe o modelo de cabeçalho global GRATUITAMENTE

Para colocar as mãos no modelo de cabeçalho global gratuito, primeiro você precisa baixá-los 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!

1. Crie um novo modelo de cabeçalho

Vá para Divi Theme Builder e adicione um novo modelo de cabeçalho global

Comece acessando o Divi Theme Builder. Um lá, adicione um novo cabeçalho global.

Comece a construir do zero

E comece a construir o design do cabeçalho do zero.

2. Construir logotipo e ícone de hambúrguer

Configurações da seção

Cor de fundo

Uma vez dentro do editor de modelos, começaremos construindo o logotipo e o ícone de hambúrguer. Você notará que já existe uma seção lá. Abra as configurações da seção e aplique uma cor de fundo transparente.

• Cor de fundo: rgba (255,255,255,0)

Espaçamento

Vá para a guia de design da seção e remova todo o preenchimento padrão superior e inferior a seguir.

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

Posição

Em seguida, vá para o avançado e gire a seção fixa.

• Cargo: Fixo
• Localização: Superior Esquerdo
• Índice Z: 13

Adicionar nova linha

Estrutura da Coluna

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

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha, vá para a guia de design e altere as configurações de dimensionamento de acordo:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura: 95%
• 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

CSS do elemento principal

E para garantir que o logotipo e o ícone de hambúrguer apareçam lado a lado em telas menores, inseriremos uma linha de código CSS no elemento principal da linha.

display: flex;

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. Carregue um logotipo de sua escolha.

Dimensionamento

Vá para a guia de design e altere as configurações de dimensionamento a seguir.

• Largura máxima:
  • Desktop: 80px
  • Tablet e telefone: 50px

Posição

Em seguida, reposicione todo o módulo.

• Posição: Absoluta
• Localização: Superior Esquerdo
• Deslocamento vertical: 20px

Adicionar Módulo de Texto à Coluna 3

Estrutura HTML na caixa de conteúdo

Na terceira coluna, adicionaremos um Módulo de Texto. Usaremos este Módulo de Texto para criar nosso ícone de hambúrguer. Comece alternando para a guia de texto na caixa de conteúdo e insira as seguintes tags HTML:

<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

Dimensionamento

Modifique as configurações de dimensionamento do módulo a seguir.

• Largura: 80px
• Altura: 80px

Espaçamento

Em seguida, aplique valores de preenchimento personalizados em diferentes tamanhos de tela.

• Enchimento superior:
  • Desktop: 10px
  • Tablet e telefone: 17px
• Preenchimento inferior:
  • Desktop: 10px
  • Tablet e telefone: 17px
• Preenchimento esquerdo:
  • Desktop: 15px
  • Tablet e telefone: 30px
• Preenchimento direito:
  • Desktop: 15px
  • Tablet e telefone: 10px

Posição

Reposicione este módulo também.

• Posição: Absoluta
• Localização: canto superior esquerdo

3. Construir menu de hambúrguer

Adicionar nova seção

Fundo Gradiente

Agora que temos o logotipo e o ícone de hambúrguer no lugar, podemos passar para a próxima parte, que é dedicada à construção do menu de hambúrguer e todos os seus itens. Comece adicionando uma nova seção, abra as configurações da seção e aplique um fundo gradiente.

• Cor 1: # 000000
• Cor 2: # 111111
• Tipo de gradiente: Linear
• Direção do gradiente: 90 graus
• Posição inicial: 50%
• Posição final: 50%

Dimensionamento

Aplique uma altura mínima e uma altura máxima às configurações de dimensionamento a seguir.

• Altura mínima: 100vh
• Altura máxima: 100vh

Espaçamento

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

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

Transbordamentos

Modifique os transbordamentos também.

• Excesso horizontal: oculto
• Estouro vertical: Auto

Posição

Para garantir que o menu possa ser aberto o tempo todo, reposicionaremos a seção na guia avançada.

• Cargo: Fixo
• Localização Top Center

Adicionar nova linha

Estrutura da Coluna

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

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha, vá para a guia de design e altere as configurações de dimensionamento da seguinte forma:

• 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

Transbordamentos

Em seguida, vá para a guia avançada e altere os transbordamentos.

• Excesso horizontal: oculto
• Estouro vertical: Auto

Posição

Reposicione a linha também.

• Posição: Absoluta
• Localização Top Center

Configurações da coluna 1

Espaçamento

A seguir, abriremos as configurações da coluna 1 de nossa linha e aplicaremos alguns valores de preenchimento responsivo personalizado.

• Enchimento superior:
  • Desktop: 24vh
  • Tablet e telefone: 10vh
• Preenchimento inferior:
  • Desktop: 24vh
  • Tablet e telefone: 5vh
• Preenchimento esquerdo: 13%
• Preenchimento direito: 13%

Fronteira

Aplicaremos algumas configurações de borda também:

• Largura da borda direita:
  • Desktop: 2px
  • Tablet e telefone: 0px \
• Cor da borda direita: # 191919
• Largura da borda inferior:
  • Desktop: 0px
  • Tablet e telefone: 2px
• Cor da borda direita: # 191919

Configurações da coluna 2

Espaçamento

Em seguida, passaremos para a coluna 2 e aplicaremos alguns valores de preenchimento personalizados lá também.

• Enchimento superior:
  • Desktop: 24vh
  • Tablet e telefone: 5vh
• Preenchimento inferior:
  • Desktop: 24vh
  • Tablet e telefone: 5vh
• Preenchimento esquerdo: 13%
• Preenchimento direito: 13%

Adicione o Módulo de Texto # 1 à Coluna 1

Adicionar conteúdo H3

É hora de adicionar módulos, começando com um primeiro Módulo de texto na coluna 1. Adicione algum conteúdo H3 de sua escolha.

Configurações de texto H3

Vá para a guia de design e altere as configurações de texto H3 da seguinte forma:

• Fonte do título 3: Montserrat
• Peso da fonte do cabeçalho 3: ultra negrito
• Estilo da fonte do título 3: maiúsculas
• Cor do texto do título 3: #ffffff
• Tamanho do Texto do Título 3
  • Desktop: 1vw
  • Tablet: 2,5vw
  • Telefone: 3,5vw
• Cabeçalho 3 espaçamento entre letras: 5 px

Espaçamento

Adicione alguma margem inferior a seguir.

• Margem inferior: 5vh

Clonar Módulo de Texto e Colocar Duplicado na Coluna 2

Depois de concluir este primeiro módulo, você pode cloná-lo uma vez e colocar a duplicata na coluna 2.

Mudar o Conteúdo

Certifique-se de alterar o conteúdo neste módulo duplicado.

Adicionar Módulo de Texto # 2 à Coluna 2

Estrutura HTML na caixa de conteúdo

Para mostrar nossos itens de menu, incluindo itens de submenu, usaremos a guia de texto de um novo Módulo de Texto. Vá em frente e adicione um novo Módulo de Texto à coluna 1 e insira o seguinte HTML:

<span style="color: #686868;">01—</span> <a href="#">Services</a> <span class="toggle-sub-menu" style="color: #ffff00;">+</span>
<ul>
	<li><a href="#">Web design</a></li>
	<li><a href="#">Branding</a></li>
</ul>

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto da seguinte forma:

• Fonte do texto: Montserrat
• Peso da fonte do texto: fino
• Cor do texto: #ffffff
• Tamanho do texto:
  • Desktop: 2.7vw
  • Tablet: 4vw
  • Telefone: 6vw
• Espaçamento entre letras do texto: 0,1em
• Altura da linha de texto: 1em

Configurações de texto de link

Altere a cor do texto do link também.

• Cor do texto Lin: #ffffff

Configurações de texto de lista não ordenada

Em seguida, modifique as configurações de texto da lista não ordenada.

• Fonte de lista não ordenada: Montserrat
• Peso da fonte da lista não ordenada: Negrito
• Estilo de fonte da lista não ordenada: maiúscula
• Tamanho não ordenado do texto:
  • Desktop: 1vw
  • Tablet: 2,5vw
  • Telefone: 3,5vw
• Altura da linha da lista não ordenada: 1,5em
• Tipo de estilo de lista não ordenado: Nenhum
• Posição de estilo de lista não ordenada: dentro

Espaçamento

E conclua as configurações do módulo adicionando algum preenchimento personalizado superior e inferior.

• Enchimento superior: 5%
• Estofamento inferior: 5%

Clonar Módulo de Texto para Criar Variação Sem Submenu

Depois de concluir o primeiro módulo, você pode cloná-lo uma vez. Usaremos essa duplicação para criar uma variação do item de menu sem itens de submenu.

Deixar de fora o submenu e o ícone de alternância

Para transformar este módulo duplicado em um item de menu regular sem itens de submenu, use esta estrutura HTML:

<span style="color: #686868;">03—</span> <a href="#">Contact</a>

Reutilizar os dois tipos de itens do menu

Depois de ter ambas as variações dos itens de menu no lugar, você pode reutilizá-los de acordo, clonando-os e alterando o conteúdo.

Adicionar Módulo de Texto # 2 à Coluna 2

Adicionar conteúdo H4 e parágrafo à caixa de conteúdo

Na coluna 2, adicionaremos outro Módulo de texto com algum conteúdo H4 e parágrafo de nossa escolha.

Configurações de texto

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

• Fonte do Texto: Alata
• Cor do texto: #cecece
• Tamanho do texto:
  • Desktop: 0.8vw
  • Tablet: 2,4vw
  • Telefone: 3.4vw
• Espaçamento entre letras do texto: 1px
• Altura da linha de texto: 1,5em
• Cor do Texto: Claro

Configurações de texto H4

Faça algumas alterações nas configurações de texto H4 também.

• Tamanho do texto do título 4:
  • Desktop: 1vw
  • Tablet: 3vw
  • Telefone: 4vw

Dimensionamento

Em seguida, modifique a largura do módulo nas configurações de dimensionamento.

• Largura: 48%

CSS do elemento principal

E adicione uma linha de código CSS ao elemento principal do módulo. Esta linha de código CSS nos ajudará a colocar dois Módulos de Texto próximos um do outro.

display: inline-block;

Clone Text Module # 2

Mudar Cópia

Depois de concluir o Módulo de texto, você pode cloná-lo uma vez e alterar o conteúdo de acordo.

Adicionar Módulo de Acompanhamento de Mídia Social à Coluna 2

Adicionar redes sociais de escolha

O último módulo de que precisamos neste design é um Módulo de Acompanhamento de Mídia Social na coluna 2. Adicione as redes sociais de sua escolha.

Remova a cor de fundo de cada rede social individualmente

Remova a cor de fundo de cada rede social individualmente.

Espaçamento

Em seguida, volte para as configurações gerais do módulo e aplique alguma margem superior.

• Margem superior: 5vh

4. Adicionar funcionalidade

Adicionar classe CSS ao módulo de texto do ícone de hambúrguer

Agora que a base do design do nosso menu de hambúrguer foi construída, podemos nos concentrar em adicionar funcionalidade! A primeira coisa que você precisa fazer é abrir o Módulo de Texto contendo o ícone de hambúrguer e adicionar a seguinte classe CSS:

• Classe CSS: fullwidth-open

Adicionar classe CSS à seção 2

Em seguida, abra a seção do menu de hambúrguer, seção 2, e adicione a seguinte classe CSS:

• Classe CSS: menu de largura total

Adicionar classe CSS a cada módulo no menu Fullwidth

Para criar o efeito de animação escalonado personalizado, precisaremos aplicar a seguinte classe CSS a cada módulo na seção # 2.

• Classe CSS: efeito escalonamento

Adicionar classe CSS extra aos itens do menu

Adicione uma classe CSS extra, chamada “item do menu principal”, a cada um dos itens do menu na coluna 1 também.

• Classe CSS: item do menu principal do efeito escalonamento

Adicionar Módulo de Código à Seção 1

Para aplicar a funcionalidade, usaremos código CSS e JQuery customizado. Colocaremos este código em um novo Módulo de Código na segunda coluna de nossa linha na seção # 1.

Insira o código CSS

Adicione o seguinte código CSS ao Módulo de Código entre as tags de estilo, como você pode observar na tela de impressão abaixo.

/* enable class below once you're done editing the menu */

/*
.fullwidth-menu {
opacity: 0;
top: 0vh;
visibility: hidden;
}
*/

.line{
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.fullwidth-open.open .line{
background: white; 
}

.line-1 {
top: 15px;    
}
  
.line-2 {
top: 25px;
width: 80%;
}
 
.line-3 {
top: 35px;
width: 50%;
}
 
.fullwidth-open.open .line-1 {
top: 25px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
 
.fullwidth-open.open .line-2 {
display: none;
}
 
.fullwidth-open.open .line-3 {
top: 25px;
width: 100%;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
 
.fullwidth-menu-open {
opacity: 1 !important;
top: 0 !important;
visibility: visible !important;
}
 
.fullwidth-menu {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
  
.main-menu-item ul {
display: none; 
padding: 0;
margin-top: 50px;
}
  
.toggle-sub-menu {
cursor: pointer;
}

Inserir Biblioteca Anime.js

Continue adicionando a biblioteca Anime JavaScript usando tags de script, como você pode ver na tela de impressão abaixo . Usaremos esta biblioteca incrível para criar o efeito escalonamento na próxima etapa do tutorial.

• src = ”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”

Insira o código JQuery

As funcionalidades de clique em nosso menu de hambúrguer são alimentadas pelo seguinte código JQuery. Certifique-se de colocar este código entre as tags de script, como você pode ver na tela de impressão abaixo.

jQuery(function($){
$(document).ready(function(){  

// All variables needed in functions  
var menuSection = $('.fullwidth-menu');
var hamburgerIcon = $('.fullwidth-open');
var menuLink = $('.fullwidth-menu a');
var subMenu = $('.main-menu-item ul');
var toggleIcon = $('.toggle-sub-menu');
  
  
// Open fullwidth menu & animate items  
hamburgerIcon.click(function(){
	$(this).toggleClass('open');
	menuSection.toggleClass('fullwidth-menu-open');
	if (menuSection.hasClass("fullwidth-menu-open")) {
		anime({
  		targets: '.stagger-effect',
  		translateY: [150, 0],
  		opacity: [0, 1],
  		loop: false,
  		delay: anime.stagger(100, {easing: 'easeOutQuad'})
		});

	} else { 
		subMenu.slideUp();  
		toggleIcon.text($(this).text() == '+' ? '-' : '+');  
	}
});

// Close fullwidth menu when clicking an item
menuLink.click(function(){
	hamburgerIcon.toggleClass('open');
	menuSection.toggleClass('fullwidth-menu-open');  
  subMenu.slideUp();  
	toggleIcon.text($(this).text() == '+' ? '-' : '+');  
});
  
// Change icon when toggling the submenu  
toggleIcon.click(function(){  
	var subMenu = $(this).parent().find("ul");
	subMenu.slideToggle(); 
	$(this).text($(this).text() == '-' ? '+' : '-'); 
});  
  
});
});

Ative a classe CSS assim que concluir o design do cabeçalho de tela inteira

Por último, mas não menos importante, vamos habilitar uma classe CSS no Módulo de Código, que você pode encontrar na primeira seção. Abra o Módulo de Código e remova “/ * * /” no início e no final da aula. Habilitar essa classe (em combinação com algum código JQuery que já está habilitado) garantirá que a seção que contém os itens de menu não carregue imediatamente quando alguém visitar uma de suas páginas. Depois de habilitar esta classe, a segunda seção em sua página desaparecerá do Visual Builder, mas você ainda pode acessá-la no modo Wireframe ou desligar a classe CSS se desejar fazer alterações adicionais.

5. Salve as alterações do Construtor de Cabeçalho e Tema

É isso! A única coisa que resta a fazer é salvar o modelo e o Divi Theme Builder e ver o resultado em seu site!

Antevisão

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

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como ser criativo com seu cabeçalho Divi. Mais especificamente, mostramos como criar um menu de hambúrguer com animação personalizada. Assim que um visitante clica no ícone de hambúrguer, um menu em tela cheia muda e revela os itens do menu um por um, o que resulta em uma bela experiência do usuário. Você também conseguiu baixar o arquivo JSON de modelo gratuitamente! Se você tiver alguma dúvida, sinta-se à 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.