MEGA MENU DROPDOWN

Como criar um Mega Menu Dropdown com apenas CSS

Olá pessoal, tudo bom?
Neste tutorial irei ensinar como desenvolver um Mega Menu dropdown com apenas CSS3, sem a necessidade de script.
Espero que gostem.
Vamos lá!

Você já leu nossos artigos anteriores?

MEGA MENUS

Mega Menus são normalmente utilizados em sites de e-commerce, mas eles se tornam mais populares porque eles são uma ótima maneira de visualizar/organizar o conteúdo.
Podemos subdividir um submenu em diversos menus para facilitar a usabilidade do site.

mega-menu-2

HTML

Em HTML nós vamos criar um menu normal <nav>, com uma lista não ordenada <li> e vamos adicionar os links.

Veja Também: ANIMAÇÃO COM CSS3 – TRANSITION

 

 

RESETANDO PROPRIEDADES CSS

Agora precisamos resetar algumas configurações padrão de css:

 

 

Agora adicionamos algumas propriedades para deixar os itens de nav inline:

 

 

ESTILIZANDO O NAV

Vamos começar com os estilos comuns, como o padding, height, position, etc. Em seguida, vamos definir os estilos de tipografia, como font-size, color, text-shadow, etc. Também vamos definir um background-color e um border-left e border-right. Para suavizar as transições (animações), vamos adicionar um transition do CSS3.

 

 

Agora vamos adicionar o estilo para quando passarmos o mouse sobre os links (:hover):

 

 

ESTILIZANDO O FORMULÁRIO DE BUSCA

Vamos começar estilizando a tag <form> adicionando width, height e algumas outras propriedades:

 

 

Agora vamos estilizar o elemento <input type="text">. Vamos formatar seu estilo padrão e seu estilo ao clicarmos sobre ele (:focus).

ESTÁ GOSTANDO DESTE ARTIGO?

Então não deixe de compartilhar com seus amigos. Ajude a Tutorial Web Design a crescer ainda mais.

 

 

 

Agora vamos estiliar o botão de pesquisa <button type="submit">.
Os estilos que iremos aplicar são semelhantes ao campo de texto, só vamos definir uma largura fixa e altura e adicionar cantos arredondados usando a propriedade border-radius. Temos também que definir transições para as duas entradas, a fim de ter algumas animações suaves e agradáveis.
Também vamos estilizar o ícone do botão.

 

 

EXEMPLO ATÉ AGORA

mega menu dropdown 2

MEGA NAVS DROPDOWNS

Esta é uma das partes mais importantes. Vamos começar por definir um position: absolute, width: 100%, display: block e os valores top e left. Então, vamos esconder o nav usando as propriedades de opacity, de visibility e overflow. Depois disso, vamos adicionar o background-color, border-radius e algumas transições. A razão pela qual nós estaremos usando essas três propriedades para ocultar os navs suspensos e não o display: none; é porque se usarmos display: none; as transições não vão funcionar.

 

 

Para mostrar o nav, nós vamos mudar a opacity para 1, a propriedade visibility para visible e overflow para visible:

 

 

CONTEUDO DO MEGA MENU

Agora nosso mega nav suporta qualquer tipo de linguagem (html, php, js, etc).
Para adicionarmos os subnavs ao mega menu, precisamos informá-los dentro de uma <div> como uma nova lista não ordenada <ul><li>:

 

 

Então, vamos adicionar alguns estilos básicos para este conteúdo. Vamos definir a largura de cada coluna a 20%, o pading de 2,5% e float à esquerda. Para terminar, vamos adicionar alguns estilos de tipografia para o título e os links.

 

 

RESULTADO FINAL

Exemplo: http://jsfiddle.net/gcdesigner/MbEt6/4/embedded/result/

mega menu dropdown 3

FINALIZANDO

É isso ai galera.
Espero que tenham gostado.
Não deixem de comentar, ok?

Muito obrigado e até a próxima.

Envie um Comentário

Comentários

Seja o primeiro a comentar