Efeito CSS “Dinossauro”

Ultimamente recebi vários emails de meus leitores perguntando com criar o efeito que existe no existia no design anterior do site do Maujor que faz com que apareça um dinossauro, ao lado dos itens do menu de navegação, sempre que o usuário coloca o mouse sobre o link.

Trata-se de um efeito bem simples que no caso do meu site foi criado com jQuery, pois uso essa biblioteca para obter vários efeitos no site.

Por outro lado, suponho que os emails foram enviados por leitores que não têm intimidade com jQuery ou que buscam uma solução sem uso da biblioteca.
Assim, resolvi escrever essa matéria com a finalidade de orientar os leitores apresentando uma solução, entre as inúmeras possíveis, que ainda que não seja a melhor poderá servir de incentivo para a busca de outras.

A página que ilustra esse tutorial possui uma estilização semelhante à do site e pode ser visitada neste link (abre em outra janela). Visite a página e passe o mouse sobre os itens do menu de navegação.

Não vou entrar em detalhes de estilização da página, pois se você for usar esse efeito irá adaptá-lo ao seu layout.

HTML e CSS

Na marcação HTML do seu menu de navegação insira a imagem que irá aparecer ao lado dos links dentro de um elemento container dos links.
Na maioria dos casos o elemento-pai container dos links é o elemento ul ou, em alguns poucos casos o elemento ol, contudo inserir um elemento img como elemento-filho daqueles elementos é inválido segundo a sintaxe HTML. Assim, insira o elemento img dentro do elemento-pai de ul ou ol.

Observe o exemplo a seguir:

<nav id="menu">
<h2>Navegação</h2>
<h3>Fundamentos CSS</h3>    
    <ul>
        <li><a href="#">Introdução às CSS</a></li>
        <li><a href="#"> Sintaxe CSS</a></li>
        
        <li><a href="#">A propriedade CSS background</a></li>
    </ul>
<img id="dino" src="dinossauro.png" alt="dinossauro">
</nav>

Criando a marcação desta forma, facilitaremos a tarefa de posicionar de forma absoluta a imagem, tomando como base (ou contexto) o próprio container do widget da navegação definindo para ele posição relativa.

Observe as regras de estilo para posicionar a imagem:

#menu {
 position: relative; /* cria o contexto de posicionamento */ /* mais declarações */}
#dino {
 display: none; /* esconde a imagem */ position: absolute;
 left: 102%; /* posiciona a imagem 2% (margem direita) após o container do menu */ 
 /* mais declarações */;
}

Nota: Omitimos as declarações de estilo não envolvidas diretamente no efeito.

A marcação HTML e a estilização mostradas anteriormente quando inseridas na página de exemplo produzem a renderização que pode ser vista neste link (abre em outra janela).

Não aplicamos display: none na página que foi visualizada, mas deverá ser aplicado para obtenção do efeito final.

JavaScript

Agora precisamos projetar o comportamento para obter o efeito, ou seja, fazer com que ao ser colocado o ponteiro do mouse sobre um item da navegação a imagem apareça ao seu lado. Lembre que ela, imagem, já está à 2% à direita dos itens e escondida. Falta fazê-la aparecer e “caminhar” na vertical. E, também fazê-la desaparecer quando o usuário retira o ponteiro do mouse dos itens da navegação.

As declarações JavaScript que fazem a mágica são mostradas a seguir:

<script type="text/javascript">
var dino = document.getElementById('dino'); 
var menu = document.getElementById('menu');
var itensMenu = menu.getElementsByTagName('li');
var j = itensMenu.length;

for (var i=0; i<j; i++) {
 itensMenu[i].onmouseover = function() {
  coordenadaY = this.offsetTop;
  dino.style.display = 'block'; 
  dino.style.top = coordenadaY + 'px'; 
 }
}

menu.onmouseout = function() {
 dino.style.display = 'none'; 
}
</script>

Para mais detalhes consulte o código fonte das páginas exemplo.

O script é bem simples e usa as funcionalidades JavaScript previstas para o DOM1. Assim, o script é suportado por navegadores mais antigos. Testei no IE8.

Se você não entender o script ou tiver qualquer outra observação a respeito desta matéria poste sua dúvida ou ideia nos comentários.

Atualizações:

1. Solução com CSS

   Os questionamentos que recebi apontavam para a solução do efeito com uso de JavaScript, contudo existe uma solução, bem mais simples, com CSS. O João Victor (abre em nova janela) criou e hospedou a solução com CSS neste link (abre em nova janela). Obrigado João Victor!

2. Efeito suave na transição:

   O leitor Maycon no comentário #2 solicita uma solução com efeito suave para aparecimento do dinossauro. Desenvolvi a solução para o efeito suave usando a funcionalidade para transições das CSS3 aplicada no exemplo do JV (comentário #1). O exemplo encontra-se em http://jsbin.com/ipuGeCA/2/edit (abre em outra janela).