Como Criar um Menu Slide Down Push no Divi

Cabeçalhos grandes com muitos links de navegação podem ocupar muito espaço valioso em seu site (especialmente acima da dobra). É por isso que os menus pop-up e deslizantes estão se tornando cada vez mais populares. Na maioria das vezes, os menus que deslizam para exibição ficam acima do conteúdo da página, ocultando certos elementos. No entanto, um menu push deslizante funciona de maneira um pouco diferente. O efeito de deslizamento é o único que o menu desliza para dentro da parte superior da página enquanto empurra simultaneamente o conteúdo da página para baixo, de forma que nada fica oculto.

Neste tutorial, mostraremos como construir um menu push deslizante do zero usando o Divi Theme Builder. Uma vez que o menu é construído, ele se torna uma ferramenta versátil para todos os tipos de aplicativos, já que você poderá preencher a seção com qualquer conteúdo que desejar usando o Divi Builder.

Vamos lá!

Espiada

Aqui está uma rápida olhada no menu push deslizante que construiremos neste tutorial.

Baixe o Layout GRATUITAMENTE

Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download 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!

Para importar o layout da seção para o Divi Theme Builder, navegue até o Divi Theme Builder.

Clique no ícone de portabilidade.

No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.

Em seguida, clique no botão importar.

Uma vez feito isso, o modelo de seção aparecerá no Divi Theme Builder.

Vamos para o tutorial, vamos?

Construindo o menu deslizante de ação com o Divi Theme Builder

Criando um Novo Menu Global

Para criar o menu, iremos construir um novo cabeçalho global dentro do Divi Theme Builder.

Navegue até Divi> Theme Builder.

Em seguida, clique na área “Adicionar cabeçalho global” dentro do modelo de site padrão. No menu suspenso, selecione “Build Global Header”.

Isso o levará ao editor de layout de cabeçalho global.

Uma vez no Editor de Layout de Cabeçalho Global, escolha a opção “Construir do zero.

Criando o Menu Push

O primeiro elemento que construiremos juntos é a seção de menu push. Esta seção conterá os itens de menu que alternarão para baixo e para cima ao clicar no botão de alternância do menu.

Configurações da seção

Abra as configurações da seção padrão e atualize as configurações da seguinte forma:

Fundo

• Cor de fundo: # 1a1e36

Preenchimento

• Preenchimento: 0 px superior, 0 px inferior

Classe CSS

Na guia avançada, adicione a seguinte classe CSS que será usada posteriormente em nosso código JS.

• Classe CSS: et-push-menu

CSS personalizado (tablet)

Em seguida, precisamos ajustar a altura da seção no celular usando uma altura calculada para acomodar a barra de cabeçalho principal que adicionaremos. Isso basicamente fará com que a seção ocupe toda a altura da janela no celular quando o usuário alternar o menu aberto.

Adicione o seguinte CSS personalizado ao elemento principal apenas no tablet:

height: calc(100vh - 70px);
overflow:scroll !important;
overscroll-behavior: contain;

Adicionar linha 1

Assim que as configurações da seção forem concluídas, crie uma linha de uma coluna dentro da seção.

Configurações da linha 1

Em seguida, atualize as configurações de linha da seguinte forma:

Projeto

• Largura da calha: 1
• Largura: 100%
• Largura máxima: 1280 px
• Preenchimento: 3vh superior, 3vh inferior
• Largura da borda inferior: 1 px
• Cor da borda inferior: rgba (255,255,255,0,2)

CSS customizado

Na guia avançada, adicione o seguinte CSS personalizado ao elemento principal:

Na área de trabalho ...

display:flex;
justify-content:center;
align-items:center;

No Tablet ...

display:flex;
flex-direction:column;
align-items:center;

Configurações de coluna

Depois de concluir as configurações da linha, abra as configurações da coluna e adicione um snippet CSS personalizado ao elemento principal:

display:flex;
align-items:center;
justify-content:center;

Isso centralizará o conteúdo da coluna vertical e horizontalmente.

Adicionar botão

Agora estamos prontos para começar a adicionar nossos itens de menu usando módulos de botão. Comece adicionando um novo botão à coluna.

Configurações de botão

Em seguida, atualize as configurações do botão da seguinte forma:

Contente

• Texto do botão: Design
• URL do link do botão: # (substitua-o por seu URL personalizado posteriormente)

Projeto

• Cor do texto do botão: #ffffff
• Largura da borda do botão: 0 px
• Fonte do botão: Montserrat
• Peso da fonte do botão: pesado
• Ícone do botão: [sua escolha]
• Posicionamento do ícone do botão: Esquerda

Duplicando a coluna

Agora, para criar os botões adicionais para o menu, podemos duplicar a coluna. Para este projeto, vamos duplicar a coluna 4 vezes para nos dar um total de 5 itens / botões de menu. em uma linha de cinco colunas.

Adicionar linha 2

Assim que a primeira linha estiver completa, estamos prontos para adicionar outra linha de botões que podem ser usados ​​para um conjunto diferente de itens de menu.

Para criar a próxima linha, duplique a linha 1.

Excluir todas as colunas exceto uma

Em seguida, exclua todas as colunas, exceto uma na linha duplicada.

Configurações da linha 2

Atualize as configurações para a linha 2 da seguinte maneira:

• Largura máxima: 1080px
• Largura da borda inferior: 0 px

Configurações de coluna

Em seguida, adicione uma borda à coluna da seguinte maneira:

• Largura da borda direita: 1px
• Cor da borda direita: rgba (255,255,255,0,2)

Atualizar configurações do botão

Depois que a coluna tiver a borda direita, abra as configurações do botão e atualize o seguinte:

• Tamanho do texto do botão: 14 px
• Espaçamento entre letras dos botões: 2 px
• Peso da fonte do botão: Semi negrito
• Estilo da fonte do botão: TT
• Mostrar ícone do botão: NÃO

Duplique a coluna

Assim como fizemos antes, vamos duplicar a coluna para criar botões e colunas adicionais. Para este projeto, vamos duplicar a coluna 3 vezes para nos dar um total de 4 botões em uma linha de 4 colunas.

Excluindo a Borda da Última Coluna

Como não queremos que a última coluna tenha a borda direita, abra as configurações da coluna 4 e atualize a largura da borda:

• Largura da borda direita: 0 px

Criando a barra de cabeçalho principal

A seguir, vamos criar a seção para a barra de cabeçalho principal. Esta barra de cabeçalho permanecerá sempre visível e será o que contém o logotipo do nosso site, um CTA e nosso botão de alternância do Menu.

Adicionar Seção

Antes de adicionarmos a nova seção, é uma boa ideia atualizar o rótulo da seção anterior para ler “Seção do menu push”.

Em seguida, crie uma nova seção abaixo da primeira seção.

Configurações da seção

Agora atualize o rótulo na nova seção para ler “Seção do cabeçalho”. Em seguida, abra as configurações da seção e atualize o seguinte:

Preenchimento

• Preenchimento: 0 px superior, 0 px inferior

Adicionar linha

Depois que o preenchimento da seção for adicionado, adicione uma linha de três colunas à seção.

Configurações de linha

Abra a configuração de linha e atualize o seguinte:

Dimensionamento

• Largura da calha: 1
• Largura: 90%
• Altura: 70px

Preenchimento

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

CSS customizado

Na guia avançada, adicione o seguinte CSS personalizado ao elemento principal:

display:flex;
align-items:center;

Isso centralizará verticalmente as colunas na linha.

Adicionar botão

Para criar o CTA principal na seção de cabeçalho, podemos usar um botão da segunda linha da seção superior. Copie o botão da coluna 1 na linha 2 da seção superior e cole-o na coluna 1 da linha na seção de cabeçalho.

Atualizar configurações do botão

Em seguida, abra as configurações do botão duplicado e atualize o seguinte:

• Texto do botão: Inscreva-se
• Tamanho do texto do botão: 14 px
• Cor do texto do botão: # 1a1e36
• Mostrar ícone do botão: SIM
• Ícone do botão: seta para a direita (veja a imagem)

Adicionar logotipo

Na coluna do meio, adicione um módulo de imagem. Será assim que adicionaremos o logotipo do site de forma dinâmica.

Passe o mouse sobre a caixa da imagem e clique no ícone “Usar conteúdo dinâmico”. No menu suspenso, selecione “Logotipo do site”.

Configurações de imagem

Em seguida, na guia de design, atualize o seguinte:

• Alinhamento de imagem: centro
• Altura máxima: 55px

Adicionar ícone de hambúrguer personalizado

Poderíamos usar um ícone normal por meio de um módulo de blurb como nosso botão de menu, mas para este tutorial, pensei em adicionar um botão de menu personalizado com um efeito de transição legal.

Adicionar Módulo de Texto

Para criar o ícone do menu, usaremos um módulo de texto com algum HTML personalizado que será estilizado com CSS externo.

Vá em frente e adicione um módulo de texto à coluna 3.

Adicionar módulo de texto HTML

Em seguida, adicione o seguinte HTML ao conteúdo do módulo de texto:

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

Fundo

Dê ao módulo de texto uma cor de fundo:

• Cor de fundo: # 1a1e36

Design de Texto

Em seguida, atualize as configurações de design da seguinte forma:

• Largura: 70px
• Alinhamento do Módulo: direito
• Altura: 70px
• Preenchimento: 20 px superior, 20 px inferior, 16 px à esquerda, 16 px à direita

Classe CSS

Na guia avançada, adicione a seguinte classe CSS:

• Classe CSS: et-push-menu-toggle

Adicionar Código

Para trazer para casa a funcionalidade de que precisamos para este menu push deslizante funcionar, adicionaremos nosso CSS e jQuery personalizados a um módulo de código.

Vá em frente e adicione um módulo de código à coluna 3 sob o módulo de texto.

Em seguida, cole o seguinte código (importante: envolva este código em tags de estilo para que funcione corretamente):

  .line {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #ffffff;
    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;
  }
  .line-2 {
    top: 10px;
  }
  .line-3 {
    top: 20px;
  }
  .et-push-menu-toggle.open .line-1 {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .et-push-menu-toggle.open .line-2 {
    display: none;
  }
  .et-push-menu-toggle.open .line-3 {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .et-push-menu {
    display:none;
  }
  .et-fb .et-push-menu {
    display:block;
  }
  .et-push-menu-toggle {
    cursor:pointer;
  }

Em seguida, copie e cole este código diretamente abaixo dele (importante: envolva este código em tags de script para que funcione corretamente):

(function($) {
  $(document).ready(function(){
    $('.et-push-menu-toggle').click(function(){
      $(this).toggleClass('open');
      $('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
    });
  });  
})( jQuery );

Atualizar texto do botão e links

Finalmente, podemos atualizar todos os botões com o texto de botão e URLs de link necessários.

É isso!

Salvar configurações

Não se esqueça de salvar o layout e as configurações do construtor de temas.

Resultado final

Para ver o resultado final, confira uma página ao vivo em seu site.

Tornando-o pegajoso

Se você quiser uma versão “fixa” do menu, tudo que você precisa fazer é adicionar o seguinte snippet de CSS ao módulo de código (entre as tags de estilo ):

  header {
    position: sticky;
    top:0;
    z-index:9999;
  }
  #page-container {
    overflow-y: visible !important;
  }

E aqui está o resultado.

Pensamentos finais

Espero que goste deste menu push deslizante. O efeito é único e abre a porta para cabeçalhos mais criativos no futuro.

Estou ansioso para ouvir de você nos comentários.

Saúde!