26/08/2014 Development / css

Triangulo Mágico!!!!

Oque é um triangulo mágico? Não tem nada haver com forró, muito menos com aqueles cubos mágicos, trata-se de uma técnica onde é possível mover-se entre os itens de um menu de forma diagonal.

Um exemplo de menu que não funciona:

Exemplo de menu que funciona:

Segue um link com algumas implementações - http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

Porém essas implementações foram feitas usando javascript.

Implementei esse menu na nova página do submarino usando apenas css. :-)

Mas vamos ao que interessa.

Segue o link da implementação: - http://codepen.io/anon/pen/Cwnjq

O grande pulo do gato são as transitions:

  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  transition-delay: 0.3s;

e utilizar opacitidade e visibilty.

Agora é só usar a criatividade e fazer um menuzão bolado!

Espero que sirva