Logomarca Downs Master

Menu futuristico usando css3

08/11/2015 Artigos 5783

Neste artigo quero mostrar a vocês como criar um menu muito interessante utilizando técnicas css3 e um pouco de criatividade. Trata-se de um menu inclinado. Os lados de seus links são diagonais feitas unicamente utilizando css sem a utilização de imagem alguma.

Então, vamos começar.

Primeiramente precisamos definir nossa estrutura html simples. O que vai servir de exemplo para o menu. Abaixo o exemplo utilizado:

Repare que criei um menu dentro de uma tag header. Isso é importante para a melhor apresentação do menu, visto que seu design deitado pode não ser o modelo mais adequado em outra disposição de elementos.

Continuando, agora vamos inicialmente determinar os resets básicos para o nossa pagina e mudar a cor do fundo do body:

Em seguida vamos estilizar parcialmente nosso menu, e o header em si onde nosso menu estará contido:

E agora finalmente colocamos a mão na massa para criar o estilo do nosso menu em si. As primeiras coisas que precisam ser feitas são: Posicionar os links do menu na esquerda, e separa-los por um espaço fixo de 5px definindo cada item como relativo para o efeito hover que faremos posteriormente.

É importante ressaltar que para que o efeito funcione corretamente deveremos atacar os links como estilo especificado e não as lis. Pois atacando as lis todo o conteúdo interno é prejudicado, atacando o link você tem maior agilidade para lidar com os elementos internos.

Eis o que vamos fazer com o link: com o float:left; e display:block; garantimos que o link em questão ocupe todo o espaço de seu li pai; Em seguida são definidas algumas propriedades de respectivamente: cor, tipo de fonte, espaçamento padding nos lados e altura dos links para igualar-se a altura do menu.

E em seguida a parte importante para o nosso efeito. Utilizando o seletor transform do css3 utilizamos a propriedade skewX que aplica uma distorção de 10 graus negativos em nosso link com um eixo X como base fazendo com que as diagonais sejam apontadas para a direita e consequentemente dando um efeito “italic” em nossos itens.

E o ultimo detalhe do código abaixo: Acrescentamos um transition aplicado a toda ação feita sobre este link com o efeito ease-in sendo executado em 0.2 segundos. Isso significa que qualquer ação – hover por exemplo – que este link sofrer, será executado dentro deste intervalo de tempo, dando um efeito bem bacana para o nosso menu, confira:

Agora vamos aos efeitos e começar a estilizar nosso li ul, ou seja, os submenus do nosso menu. No código abaixo, primeiramente aplicamos um efeito hover ao menu criado acima, com um azul mais intenso e um branco contrastando com o mesmo. Em seguida atacamos o menu interno, tratando-o como um bloco individual.

Nós o posicionamos em absoluto, visto que seu li pai é seu ponto relativo; Afastamos o bloco 36px do topo do menu, deixando-o diretamente abaixo de seu link correspondente, e na esquerda retiramos 11px para alinha-lo na vertical com o link em questão; visto que o mesmo possui uma inclinação. Definimos uma largura fixa, uma cor de fundo branca e uma parte importante: uma borda de três pixels em todos os lados da box para dar uma noção de continuidade entre o link e a box do submenu.

Feito isso, utilizamos o mesmo skewX aplicado ao link acima, desta vez aplicando-o a box como um todo fazendo valer o deslocamento de -11px na esquerda do absolute. Esta inclinação extra afetará diretamente os itens do submenu. Deveremos, no código mais adiante, anular esta inclinação de modo que os títulos dos links não sejam exageradamente afetados.

Por ultimo, aplicamos um padding de 3px a box e o configuramos com um display none, fazendo com que o mesmo não apareça até a intervenção do hover do usuário sobre o link pai.

E agora na li do nosso bloco de submenu deveremos fazer algumas alterações. A primeira dela como mencionado a cima deverá ser anular a inclinação extra imposta pela box ul que envolve todos os lis, deste modo garantindo que os links não fiquem MUITO inclinados. Em seguida posicionamos todos os lis a esquerda, aplicamos uma largura de 50% a todos eles, fazendo-os ficarem um ao lado do outro ao longo do bloco, retiramos o margin aplicado nos lis do menu principal usando margin:0; e aplicamos um padding de 1 px. Este padding servirá para separar os links internos do submenu em um espaçamento uniforme.

Concluindo a formatação do li interno vamos agora estilizar o link do submenu. Colocamos todos eles com 100% de largura para garantir que eles chegem até o extremo das lis configuradas, em seguida os atacamos com um background azul e cor branca, para destaca-los contra o fundo branco do bloco de submenu. Confira o código:

E para concluir nosso tutorial, apenas aplicamos um hover nos links do submenu colocando-os com uma cor ainda mais forte, em seguida garantimos que quando for passado o mouse sobre a li pai, o submenu imediatamente apareça com display:block;

Por ultimo, com a ultima linha #menu ul li:hover a{background:#069; color:white;} garantimos que o link pai fique marcado enquanto o mouse do usuário estiver sobre seu subitem.

É isso, espero que tenham gostado, e duvidas deixem nos comentários

Veja o resultado final:

Comentários

Gerdson disse:

Bom :) !

Lucas Silva disse:

Vlws :)

Tiago disse:

Boa aula,

então lucas, você já fez uma aula sobre Progress Bar de porcentagem com PHP a algum tempo, então é o seguinte:
eu quero fazer isso com banco de dados com uma tabela users (id gols) e outra tabela niveis (id, nivel, gols).
então vamos fazer um exemplo:

na tabela niveis vamos supor que o nivel 2 precise de 30 gols, e eu como usuario tenho apenas 10. oque eu quero fazer é que a barra de progresso acompanhe sem ultrapassar a imagem do progresso. o tamanho dela é de 130, no seu video vc mostra 100; é só isso tem como me dar essa ajuda ?

obrigado pela atenção

Lucas Silva disse:

Só pra esclarescer, você quer mostrar o progresso do usuário na meta de 30 gols, certo?

Tiago disse:

ok, obrigado

Lucas Silva disse:

Dps faço um exemplo e te mando!

Tiago Carvalho disse:

Vou tentar ser mais claro sobre o assunto

tabela niveis (Nivel, Gols)

aqui eu faço o select

Tiago Carvalho disse:

Bom lucas, eu fiz do jeito que vc me falou, porém quanto + gols = usuario tiver o progresso vai diminuindo. eu n to entendendo.

vc poderia fazer o sistema ? obrigado pela atenção

Lucas Silva disse:

no caso vc teria uma meta = 30 gols e vc como usuario concluiu 10 ... dai basta vc achar a porcentagem:
$meta = 30;
$gols_user = 10;
$porcentagem = ceil(($gols_user*100)/$meta);
Vc tbm pode usar round pra pegar um ponto flutuante tipo: 33.33% (nesse caso)

O resto é simples.. usando essa variavel vc aplica o width: da div interna a div de 130px usando porcentagem.. Basta concatenar ela dentro do

Alberto Lopes disse:

Lucas como faço para adquirir os vídeos do projeto loja Virtual, o dvd que você fala. Att

Juliane sanchez disse:

Olá Alberto, tudo bem?
Caso você queira baixar as vídeo aulas do curso, conheço um meio que requer o navegador Mozilla Firefox e seu complemento de baixar vídeos "Video DownloadHelper".
Ele é um complemento bem simples é fácil de se utilizar.

Lucas Silva disse:

O curso ta de graça no cursos.downsmaster.com
Só ir lá e assistir :)

Gabriel disse:

Alberto entre no youtubemp4 la vc colocar o link do video e faz o download em mp4

Alef disse:

você é fera lucas, graças as suas vídeo aulas eu já não tenho mais tanta dificuldade em php e jquery, já até estou trabalhando na área. continue assim cara

Lucas Silva disse:

Valeu man :)

Black white disse:

Lucas é fera.

Pedro disse:

Poderia fazer um tutorial de como fazer um menu responsivo, seria muito legal

Lucas Silva disse:

Algum exemplo de menu que eu possa usar? abrs.