Como criar um menu fixo expansível ao passar o mouse com Divi

Todas as semanas, fornecemos pacotes de layout Divi novos e gratuitos que você pode usar em seu próximo projeto. Para um dos pacotes de layout, também compartilhamos um caso de uso que o ajudará a levar seu site para o próximo nível.

Esta semana, como parte de nossa iniciativa de design Divi em andamento, vamos mostrar como criar um menu fixo expansível ao pairar usando o Pacote de Layout Mecânico do Divi. Lidaremos com dois exemplos de design diferentes que você pode recriar do zero e aplicar a qualquer tipo de site que estiver criando! O menu será mostrado ao passar o mouse em tamanhos de tela de desktop e ativado ao clicar em dispositivos móveis.

Vamos lá!

Antevisão

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

Exemplo 1

Área de Trabalho

Móvel

Exemplo # 2

Área de Trabalho

Móvel

Passos Gerais

Desativar navegação fixa

Vá para as opções do tema Divi

Começaremos com algumas etapas gerais. Essas etapas são iguais para os dois exemplos e são necessárias para atingir o resultado desejado.

Se você está planejando usar um menu fixo expansível na parte inferior da página, pode deixar de fora a barra de menu principal na parte superior. Para fazer isso, você precisará acessar as opções de tema do Divi.

Desativar navegação fixa

Lá, você deseja desativar a opção da barra de navegação fixa para garantir que nenhum espaço permaneça no topo da sua página.

• Barra de navegação fixa: desativada

Ocultar barra de menu principal na página

Abra as configurações da página

Vá para a página à qual deseja adicionar o menu fixo expansível e abra as configurações da página.

Adicionar CSS personalizado

Oculte o menu principal adicionando as seguintes linhas de código CSS à sua página.

#main-header {
display: none;
}

Adicionar nova seção ao final da página

Qualquer que seja o exemplo que você deseja recriar, algumas das etapas básicas permanecem as mesmas. A primeira etapa é adicionar uma seção regular ao final da página.

Espaçamento

Abra as configurações da seção e remova todo o preenchimento personalizado superior e inferior.

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

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha 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
• 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

Estamos permitindo que toda a linha fique na parte inferior de nossa página, adicionando duas linhas únicas de código CSS ao elemento principal da linha.

bottom: 0px;
position: fixed;

Índice Z

E vamos garantir que a linha (e o Módulo de texto que adicionaremos nas próximas etapas) permaneça no topo de todo o conteúdo da página, aumentando o índice Z nas configurações de visibilidade da linha.

• Índice Z: 99

Adicionar Módulo de Código à Coluna

Adicionar código CSS entre as tags de estilo

A última parte das etapas gerais é adicionar um Módulo de Código à nova linha. O código CSS que adicionamos dentro deste Módulo de Código nos ajudará a obter o efeito revelador do foco. Cole as seguintes linhas de código CSS dentro do módulo:

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

Recriar o Exemplo # 1

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo

Agora que já passamos por todas as etapas, podemos começar a nos concentrar nos dois exemplos de design diferentes, começando pelo primeiro! Adicione um Módulo de Texto à coluna de sua linha. Na caixa de conteúdo, estamos usando o estilo de parágrafo para mostrar a cópia do '≡ Menu'. Estamos, então, colocando todos os itens do menu em uma lista não ordenada. Também adicionaremos um link para cada um dos títulos das páginas individualmente.

Cor de fundo padrão

Passe para as configurações de fundo do módulo e altere a cor de fundo.

• Cor de fundo: #ffffff

Hover Background Color

Modifique esta cor de fundo ao pairar.

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

Fundo Gradiente

E adicione um fundo gradiente padrão também.

• Cor 1: rgba (255,255,255,0)
• Cor 2: #ffffff
• Posição final: 60%

Configurações de texto padrão

Continue indo para a guia de design e modificando as configurações de texto.

• Fonte do Texto: Khand
• Peso da fonte do texto: negrito
• Cor do texto: # 021827
• Tamanho do texto: 3vh
• Orientação do Texto: Centro

Configurações de texto flutuante

Modifique algumas das configurações de texto ao passar o mouse.

• Cor do texto: rgba (255,255,255,0)
• Tamanho do texto: 0vh

Configurações de texto de link

Em seguida, vá para as configurações de texto do link e altere a cor do texto do link.

• Cor do texto do link: # 000000

Configurações de texto de lista padrão

Vá para as configurações de texto de lista padrão e estilize-o como quiser. Certifique-se de usar '0px' para o tamanho do texto em seu estado padrão.

• Fonte de lista não ordenada: Khand
• Estilo de fonte da lista não ordenada: maiúscula
• Alinhamento de texto de lista não ordenado: centro
• Cor do texto da lista não ordenada: rgba (255,255,255,0)
• Tamanho do texto da lista não ordenada: 0 px
• Altura da linha da lista não ordenada: 0em
• Posição de estilo de lista não ordenada: dentro

Configurações de texto da lista de navegação

Em seguida, modifique alguns dos valores ao focalizar para permitir que os itens de menu apareçam.

• Cor do texto da lista não ordenada: # 000000
• Tamanho do texto da lista não ordenada: 2vh
• Altura da linha não ordenada: 2.1em

Espaçamento Padrão

Vá para as configurações de espaçamento a seguir e dê uma forma ao Módulo de Texto.

• Margem esquerda: 45vw (desktop), 39vw (tablet), 33vw (telefone)
• Margem direita: 45vw (desktop), 39vw (tablet), 33vw (telefone)
• Preenchimento superior: 2vw (desktop), 4vw (tablet), 6vw (telefone)
• Preenchimento inferior: 2vw (desktop), 4vw (tablet), 6vw (telefone)

Espaçamento de pairar

Modifique esses mesmos valores ao passar o mouse.

• Margem esquerda: 14vw
• Margem direita: 14vw
• Acolchoamento superior: 8vw
• Preenchimento inferior: 8vw

Borda Padrão

Passe para as configurações de borda e certifique-se de que cada um dos cantos arredondados tenha um valor de '0px'.

Hover Border

Ative as opções de foco nos cantos arredondados e altere os valores superior esquerdo e superior direito.

• Superior esquerdo: 50vw
• Superior direito: 50vw

Sombra da caixa

Continue dando ao módulo alguma profundidade usando uma sombra de caixa. Isso garantirá que o menu não passe despercebido na página.

• Força do borrão da sombra da caixa: 1000 ms
• Cor da sombra: rgba (0,0,0,0.68)

Classe CSS

Estamos adicionando uma classe CSS ao módulo também.

• Classe CSS: dt-menu

Transições

Por último, mas não menos importante, diminua a duração da transição nas configurações de transição.

• Duração da transição: 100ms

Recriar o Exemplo # 2

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo

Passemos ao segundo exemplo! Aqui, vamos adicionar novamente '≡ Menu' usando o estilo de texto de parágrafo e os itens de menu usando uma lista não ordenada. Também adicionaremos um link para cada um dos itens do menu individualmente.

Cor de fundo padrão

Passe para as configurações de fundo e altere a cor de fundo.

• Cor de fundo: #ffffff

Hover Background Color

Modifique a cor de fundo ao pairar.

• Cor de fundo: # f71535

Configurações de texto padrão

Em seguida, vá para a guia de design e faça algumas alterações na aparência da cópia do parágrafo.

• Fonte do Texto: Khand
• Cor do texto: # 021827
• Tamanho do texto: 3vh

Configurações de texto flutuante

Modifique essas configurações ao passar o mouse.

• Cor do texto: rgba (255,255,255,0)
• Tamanho do texto: 0vh

Configurações de texto de link

Passe para as configurações de texto e altere a cor do texto do link.

• Cor do texto do link: #ffffff

Configurações de texto de lista padrão

Altere também as configurações de design dos itens da lista não ordenada.

• Fonte de lista não ordenada: Khand
• Estilo de fonte da lista não ordenada: maiúscula
• Alinhamento de texto de lista não ordenado: centro
• Cor do texto da lista não ordenada: rgba (255,255,255,0)
• Tamanho do texto da lista não ordenada: 0 px
• Altura da linha da lista não ordenada: 0em
• Posição de estilo de lista não ordenada: dentro

Configurações de texto da lista de navegação

E modifique alguns desses valores ao passar o mouse.

• Cor do texto da lista não ordenada: #ffffff
• Tamanho do texto da lista não ordenada: 2vh
• Altura da linha da lista não ordenada: 2.1em

Espaçamento Padrão

Em seguida, vá para as configurações de espaçamento e dê algum espaço ao módulo.

• Margem direita: 88vw (desktop e tablet), 71vw (telefone)
• Preenchimento superior: 6vw (desktop), 10vw (tablet), 18vw (telefone)
• Preenchimento inferior: 4vw (desktop), 10vw (tablet), 12vw (telefone)
• Preenchimento esquerdo: 1vw

Espaçamento de pairar

Modifique os valores ao pairar.

• Margem direita: 59vw
• Acolchoamento superior: 13vw
• Preenchimento inferior: 8vw
• Preenchimento esquerdo: 1vw
• Preenchimento direito: 13vw

Fronteira

E para criar este desenho de um quarto de círculo, vamos alterar a borda superior direita nas configurações de borda.

• Superior direito: 50vw

Sombra da caixa

Também adicionaremos uma sombra de caixa para criar profundidade na página.

• Força do desfoque de sombra da caixa: 1000 px
• Cor da sombra: rgba (0,0,0,0.68)

Classe CSS

Em seguida, adicionaremos uma classe CSS na guia avançada.

• Classe CSS: dt-menu

Transições

E diminua a duração da transição na guia avançada para criar uma transição rápida.

• Duração da transição: 100ms

Antevisão

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

Exemplo 1

Área de Trabalho

Móvel

Exemplo # 2

Área de Trabalho

Móvel

Pensamentos finais

Neste post, mostramos como criar um menu aderente expansível usando o Pacote de Layout Mecânico do Divi. Lidamos com dois exemplos de design diferentes que você pode recriar e usar em qualquer tipo de site que estiver construindo! Acreditamos que você esteja gostando desta iniciativa de design Divi em andamento, onde tentamos colocar algo extra em sua caixa de ferramentas de design a cada semana. Se você tiver dúvidas ou sugestões, deixe 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.