jQuery: menu con effetto LavaLamp

  • jQuery
  • Gabriele Romanato

LavaLamp è un popolare plugin per jQuery che aggiunge un cursore mobile ad un menu di navigazione. Spostando il mouse su ciascuna voce del menu, il cursore segue il mouse posizionandosi sulla voce corrente. In questo articolo vedremo come implementare un nostro effetto LavaLamp senza usare il plugin. Sarete forse stupiti dallo scoprire che in fondo questo effetto è facilmente replicabile.

Partiamo dal seguente menu di navigazione:


<div id="navigation">

	<ul>
	
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contatti</a></li>
	
	</ul>

</div>

Il nostro cursore sarà un elemento vuoto inserito dinamicamente nel contenitore generale una sola volta e quindi animato al passaggio del mouse su ciascun link. Per fare in modo che tale cursore segua il mouse, dobbiamo usare il posizionamento contestuale usando il contenitore principale come riferimento. Inoltre il cursore deve avere uno sfondo definito ma essere nascosto tramite l'azzeramento della sua larghezza:


#navigation {
	height: 2em;
	padding: 0 1em;
	border-bottom: 1px solid #c34545;
	position: relative;
}

#navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
}

#navigation li {
	float: left;
	height: 100%;
	margin-right: 0.5em;
}

#navigation a {
	float: left;
	height: 100%;
	padding: 0 1em;
	color: #d34545;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 2;
}

#navigation a:hover {
	color: #a34545;
}

#navigation #lava {
	background: #e5e5e5;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 0px;
	z-index: -1;
}

Usando un valore di z-index negativo il cursore apparirà sotto le voci. Non ho avuto modo di testare questa soluzione in Internet Explorer, quindi se riscontrate problemi non esitate a segnalarmeli.

Con jQuery abbiamo bisogno di due parametri: la posizione di ciascun link in orizzontale e la loro larghezza effettiva. Il primo parametro ci servirà per spostare il cursore, mentre il secondo farà apparire tale cursore esattamente largo come la voce corrente:


$(function() {

  $('<div id="lava"/>').appendTo('#navigation');
  
  $('li', '#navigation').each(function() {
  
    var $li = $(this);
    var $a = $('a', $li);
    var left = $a.position().left;
    var width = $a.outerWidth();
    
    $a.mouseover(function() {
    
      $('#lava').css('width', width).
      stop(true, true).
      animate({
        left: left
      }, 'slow');
      
    
    });    
  
  
  });

});

Potete visionare l'esempio finale in questa pagina.

Torna su