You are on page 1of 4

Como criar um menu LavaLamp apenas

com CSS
PUBLICADO POR EM 7 DE MAIO DE 2012 IN TUTORIAIS | 592 VIEWS | LEAVE A
RESPONSE
Oi pessoal, o estilo de menu LavaLamp foi escrito pela primeira vez porGuillermo
Rauch em JavaScript, um exemplo deste menu em pleno funcionamento esta disponvel
neste link, o que proponho para este post mostrar como podemos recriar o efeito do
menu LavaLamp apenas usando CSS3, o resultado um menu idntico
ao LavaLamporiginalmente 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 HTML
A marcao para criar o novo LavaLamp menu com CSS3 simples:

<nav id=MenuLavaLamp>
1
<a
2href="#">Krirulo</a>
3
<a href="#">xii</a>
4
<a href="#">Kriiiii</a>
5
<a href="#">Kri</a>
6
<span></span>
7
</nav>
Passo 2 CSS
Essa parte tambm simples, s CSS bsico.

1
2
3
4
5/* container do menu */
6#MenuLavaLamp{
background: rgba(0,0,0,0.3);
7
width: 305px;
8
height: 40px;
9
margin: 30px auto 0;
1
border-radius: 5px;
0
position:relative;
1
1}
1/* links */
2#MenuLavaLamp a{
1
color: black;
3
text-decoration: none;
1
padding: 10px 15px 10px
417px;
1
float:left;
5
position:relative;
1
z-index:10
6}
1
7
1
8
VER RESULTADO
Passo 3 Definir o elemento que marcar o item ativo
Como 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:

1
2/* Elemento de background */
3#MenuLavaLamp span{
width: 57px;
4
height: 30px;
5
position: absolute;
6
display: block;
7
8
background: rgba(0, 0, 0, 0.2);
9
top: 5px;
1
left: 5px;
0
border-radius: 5px;
1}
1
VER RESULTADO

Passo 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 a pseudo-classe :hover e o seletor de nvel trs de elemento
precedido ~ e tambm o pseudo-classe para selecionar pelo ndice dos elementos filhos
:nth-child
Para 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
#MenuLavaLamp
#MenuLavaLamp
#MenuLavaLamp

a:nth-child(1):hover{}
a:nth-child(2):hover{}
a:nth-child(3):hover{}
a:nth-child(4):hover{}

/*
/*
/*
/*

Para
Para
Para
Para

o
o
o
o

primeiro */
segundo */
terceiro */
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
#MenuLavaLamp
#MenuLavaLamp
#MenuLavaLamp

a:nth-child(1):hover
a:nth-child(2):hover
a:nth-child(3):hover
a:nth-child(4):hover

~
~
~
~

span{}
span{}
span{}
span{}

/*
/*
/*
/*

Para
Para
Para
Para

o
o
o
o

primeiro */
segundo */
terceiro */
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 propriedade transition


Agora para o nosso menu, realmente parecer que um LavaLamp menu, vamos adicionar
o CSS transition no elemento com, basta adicionar ao seletor #MenuLavaLamp span as
seguintes linhas

1-webkit-transition:all 0.3s;
2-moz-transition:all 0.3s;
3-ms-transition:all 0.3s;
4-o-transition:all 0.3s;
5transition:all 0.3s;
Concluso
O 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 RESULTADO
Neste 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 =D
At a prxima.