menu
DESCRIPTION
menu cssTRANSCRIPT
Como criar um menu LavaLamp apenas com CSSPUBLICADO POR EM7 DE MAIO DE 2012INTUTORIAIS| 592 VIEWS |LEAVE A RESPONSEOi pessoal, o estilo de menuLavaLampfoi escrito pela primeira vez porGuillermo Rauchem JavaScript, umexemplo deste menu em pleno funcionamento esta disponvel neste link, o que proponho para este post mostrar como podemos recriar o efeito do menuLavaLampapenas usando CSS3, o resultado um menu idntico aoLavaLamporiginalmente escrito em JavaScript, porm agora em CSS3!A verso CSS3 no suportado por todos os navegadores,veja a demostrao do menu que ser montado.Passo 1 HTMLA marcao para criar o novoLavaLampmenu com CSS3 simples:1234567KriruloxiiKriiiiiKri
Passo2 CSSEssa parte tambm simples, s CSS bsico.123456789101112131415161718/* container do menu */#MenuLavaLamp{background: rgba(0,0,0,0.3);width: 305px;height: 40px;margin: 30px auto 0;border-radius: 5px;position:relative;}/* links */#MenuLavaLamp a{color: black;text-decoration: none;padding: 10px 15px 10px 17px;float:left;position:relative;z-index:10}
VER RESULTADOPasso3 Definir o elemento que marcar o item
ativoComo voc deve ter notado, na marcao h um span dentro do
elemento
nav, ns iremos estilizar este elemento de forma com que ele
praticamente vire o background da primeira ancora do menu, dessa
forma:1234567891011/* Elemento de background */#MenuLavaLamp
span{width: 57px;height: 30px;position: absolute;display:
block;background: rgba(0, 0, 0, 0.2);top: 5px;left:
5px;border-radius: 5px;}
VER RESULTADOPasso 4 Como fazer a coisa toda funcionar?Agora sim
iremos realmente aplicar o efeito, o conceito do efeito bem
simples, para ele ser realizado, iremos usar apseudo-classe :hovere
o seletor de nvel trs deelemento precedido ~e tambm o pseudo-classe
para selecionar pelondice dos elementos filhos :nth-childPara o
efeito funcionar teremos que selecionar cada uma das ancoras
(uma por uma) e especificar como ser o estilo do span quando o
mouse
estiver sobre aquela ancora.O seletor fica da seguinte
forma#MenuLavaLamp a:nth-child(1):hover{} /* Para o primeiro
*/#MenuLavaLamp a:nth-child(2):hover{} /* Para o segundo
*/#MenuLavaLamp a:nth-child(3):hover{} /* Para o terceiro
*/#MenuLavaLamp a:nth-child(4):hover{} /* Para o quarto */
Isso simples no?Agora iremos dar mais uma complicada no seletor,
vamos fazer que ao
passar o mouse em um elemento de ancora, ele ir selecionar o
elemento
span precedido da ancora atual, e neste momento que iremos
estilizar o
span, como background, de cara uma das ancora, manualmente.O
seletor ficar da seguinte forma#MenuLavaLamp a:nth-child(1):hover ~
span{} /* Para o primeiro */#MenuLavaLamp a:nth-child(2):hover ~
span{} /* Para o segundo */#MenuLavaLamp a:nth-child(3):hover ~
span{} /* Para o terceiro */#MenuLavaLamp a:nth-child(4):hover ~
span{} /* Para o quarto */
Explicado como funciona o seletor, vamos ver como fica o CSS
/* O primeiro item do menu, j esta digamos, como de background default ento no iremos estilizar a primeira ancora *//* Estilizando a segunda ancora "Sobre" */#MenuLavaLamp a:nth-child(2):hover ~ span{left: 75px;width:52px}/* Estilizando a terceira ancora "Servios" */#MenuLavaLamp a:nth-child(3):hover ~ span{left: 143px;width:67px}/* Estilizando a quarta ancora "Contato" */#MenuLavaLamp a:nth-child(4):hover ~ span{left: 227px;width:63px}
Passo 5 Aplicando a propriedadetransitionAgora para o nosso menu, realmente parecer que umLavaLampmenu, vamos adicionar o CSS transition no elemento com, basta adicionar ao seletor #MenuLavaLamp span as seguintes linhas12345-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;
ConclusoO efeito muito bacana e o mais interessante, no
precisamos mais de
processamento no JavaScript para tal faanha, como voc percebeu
o
trabalho um pouco braal, temos que definir cada uma das ancoras
e
isso chato, mas experimental por que no suportado por uma
grande
gama de navegadores.VER RESULTADONeste exemplo que apresentei a
vocs eu testei apenas no Chrome 17 e
FireFox 11 no Windows, no me preocupei com os outros navegadores,
por
que algo experimental, quem sabe logo poredemos usa-lo! Mas
enquanto
tivermos que dar suporte ao Internet Explorer 9 no poderemos usar
este
estilo de menu apenas com CSS, por que o IE9 ainda no tem suporte
a
transition do CSS3 (Sim ele o IE7 do futuro)O efeito que empreguei
ao menu neste post foi bem bsico, mas
adicionando algumas linhas e regras keyframes de CSS3 podemos
fazer
efeitos ainda mais empolgantes, bom, espero que voc tenha gostado
e
faa testes com isso, comente e deixe o link do seu teste, todos
vo
gostar de ver =DAt a prxima.