Nosso tema está disponível para venda! Tenha um blog incrível agora mesmo.

Como criar um mega-menu sem uso de plugins

Como criar um mega-menu sem uso de plugins

Muitas vezes você deseja criar um mega-menu para seu site, mas a maioria dos pugins para esse fim são muito pesados, possuem diversas ferramentas que não são do seu interesse ou até mesmo não ficam totalmente da forma que gostaria. Por esse e outros motivos, decidi ensinar como criar um megamenu de forma rápida e fácil, diretamente no seu tema, com uso das funções do WordPress + CSS.

Algumas motivos que podem te fazer precisar criar um mega-menu:

  • Você codificou um tema WordPress, o menu de navegação já está no lugar e é responsivo.
  • Vários itens de menu têm menus suspensos com um nível de subpáginas.
  • Agora você deseja adicionar um mega menu a ALGUM dos itens de menu, que possuem mais de um nível de subpáginas.
  • As subpáginas serão exibidas em colunas. A subpágina de primeiro nível será um título de coluna e seus filhos serão os links em uma coluna.
  • Você também deseja adicionar imagens sob o título de cada coluna.
  • Todas as colunas devem ter largura igual.
  • O conteúdo das colunas pode ser menor ou mais alto, mas as colunas ainda terão a mesma altura. Eles não vão quebrar o layout.
  • As colunas devem quebrar automaticamente em uma segunda linha se um determinado número de colunas por linha for atingido.

Parece impossível? Na verdade, é bem fácil. Vamos lá…

1Configure a estrutura das páginas no admin do WordPress

  • Vá para Admin > Aparência > Menus.
  • Selecione o menu ao qual você deseja adicionar um mega menu.
  • Insira todas as subpáginas do primeiro e segundo nível.
  • Salve o menu.

Você deve ter algo como a imagem abaixo. Adicione quantos subitens forem necessários. Usamos as categorias do blog, mas você pode usar páginas, postagens, ou uma combinação de páginas, postagens, categorias etc.

 

2Adicione classes CSS aos itens do menu no admin

Na estrutura do menu que você criou, retire o item de menu de nível superior e insira a classe bwp-mega-menu no campo Classes CSS (opcional).

Se você não vir o campo CSS Classes (opcional) , clique na guia Screen Options no canto superior direito da tela e marque a caixa de seleção Classes CSS. Se não souber como fazer isso, clique aqui ou role até o final do post e saiba como fazer isso.

Agora, insira a classe bwp-mega-menu-column em cada uma dos submenus de primeiro nível do campo CSS Classes (opcional). Conforme imagem abaixo:

3Configurando o CSS do mega-menu

Agora vamos ao CSS. Abaixo iremos criar o CSS que dará à estrutura do mega menu. Vale ressaltar que cada tema usa uma estrutura própria, e o código abaixo pode não funcionar diretamente, e será preciso você adaptar ao seu tema.

Adicionem o CSS ao arquivo de CSS do seu tema.

 

@media screen and (min-width: 600px){
    .bwp-mega-menu:hover> .sub-menu {
    min-width: 220px;
    padding: 0 15px 25px 12px;
    background-color: #fff;
    max-width: 685px;
    width: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(50%, 1fr));
    left: 0 !important;
}
.bwp-mega-menu ul li {
    padding: 3px !important;
}
.bwp-mega-menu ul li a {
    font-size: 16px !important;
}
.bwp-mega-menu > ul >li {
    display: table-cell;
    width: 200px;
    min-width: 200px;
    z-index: 1;
}
}

Como você vê, estamos começando a exibir o mega menu para telas com pelo menos 600 pixels de largura. Não adianta exibi-lo em telas menores. Use seu estilo móvel padrão para telas <600px.

É importante dar position:static; para o item de menu de nível superior, acima do .bwp-mega-menu. Dessa forma, o .sub-menu terá 100% da largura do primeiro contêiner que possui position:relative;. Portanto, certifique-se de fornecer position:relative no cabeçalho do site ou qualquer outro contêiner que preferir. Se o menu de nível superior tiver position:relative; então o mega menu terá apenas a largura do item de menu de nível superior.

Essa linha grid-template-columns: repeat(auto-fit,minmax(50%, 1fr));informa ao .sub-menu (classe de sub-navegação padrão do WP) que todos os seus filhos imediatos serão exibidos como 2 colunas de largura igual em telas com largura de 600px. Se quiser exibir 3 colunas por exemplo, mude para  grid-template-columns: repeat(auto-fit,minmax(33%, 1fr));.

Assim você terá um resultado parecido com esse:

Sobre Felipe Garcia

Se você alterar isso, enviaremos um e-mail para o seu novo endereço para confirmá-lo. O novo endereço de e-mail não ficará ativo até ser confirmado.

Deixe uma resposta