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.