Como criar um menu LavaLamp apenas com CSS

Oi pessoal, o estilo de menu LavaLamp foi escrito pela primeira vez por Guillermo Rauch em JavaScript, um exemplo deste menu em pleno funcionamento esta disponível neste link, o que proponho para este post é mostrar como podemos recriar o efeito do menu LavaLamp apenas usando CSS3, o resultado é um menu idêntico ao LavaLamp originalmente escrito em JavaScript, porém agora em CSS3! A versão CSS3 não é suportado por todos os navegadores, veja a demostração do menu que será montado.

Passo 1 – HTML

A marcação para criar o novo LavaLamp menu com CSS3 é simples:

[code lang=”html”]
<nav id=”MenuLavaLamp”>
<a href="#">Krirulo</a>
<a href="#">xii</a>
<a href="#">Kriiiii</a>
<a href="#">Kri</a>
<span></span>
</nav>
[/code]

Passo 2 – CSS

Essa parte também é simples, é só CSS básico.

[code lang=”css”]
/* 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
}
[/code]

Ver Resultado

Passo 3 – Definir o elemento que marcará o item ativo

Como você deve ter notado, na marcação há um span dentro do elemento
nav, nós iremos estilizar este elemento de forma com que ele
praticamente vire o background da primeira ancora do menu, dessa forma:

[code lang=”css”]
/* 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;
}​
[/code]

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 nível três de elemento precedido ~ e também 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

[code lang=”css”]
#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 */
[/code]

Isso é simples não?

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

[code lang=”css”]
#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 */
[/code]

Explicado como funciona o seletor, vamos ver como fica o CSS

 

[code lang=”css”]
/* O primeiro item do menu, já esta digamos, como de background default então não 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 "Serviços" */
#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
}
[/code]

 

Ver Resultado

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

[code lang=”css”]
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-ms-transition:all 0.3s;
-o-transition:all 0.3s;
transition:all 0.3s;
[/code]

Ver Resultado

Conclusão

O efeito é muito bacana e o mais interessante, não precisamos mais de
processamento no JavaScript para tal façanha, como você percebeu o
trabalho é um pouco braçal, temos que definir cada uma das ancoras e
isso é chato, mas é experimental por que não é suportado por uma grande
gama de navegadores.

Ver Resultado

Neste exemplo que apresentei a vocês eu testei apenas no Chrome 17 e
FireFox 11 no Windows, não 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 não poderemos usar este
estilo de menu apenas com CSS, por que o IE9 ainda não tem suporte a
transition do CSS3 (Sim ele é o IE7 do futuro)

O efeito que empreguei ao menu neste post foi bem básico, mas
adicionando algumas linhas e regras keyframes de CSS3 podemos fazer
efeitos ainda mais empolgantes, bom, espero que você tenha gostado e
faça testes com isso, comente e deixe o link do seu teste, todos vão
gostar de ver =D

Até a próxima.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *