jQuery: menu con cursore

Per realizzare un menu con cursore tramite jQuery abbiamo solo bisogno di inserire un elemento nascosto all'interno del contenitore del menu. Quando l'utente passa col mouse sopra un link, il nostro cursore si posiziona sotto la voce del menu corrente assumendo al contempo la larghezza di tale voce. Useremo il metodo animate() unitamente all'evento mouseover. Vediamo come implementare questo effetto.

Per prima cosa la marcatura:

<div id="navigation">

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

</div>

Ovviamente è possibile inserire il cursore tramite jQuery. Vediamo il CSS:

#navigation {
	height: 3em;
}

#navigation ul {
	height: 2em;
	border-bottom: 1px solid #232323;
	margin: 0;
	padding: 0 1em;
	list-style: none;
}

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

#navigation a {
	float: left;
	height: 100%;
	padding: 0 1em;
	line-height: 2;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	background: #232323;
	border-radius: 6px 6px 0 0;
}

#navigation a:hover {
	background: #666;
}

#cursor {
	background: #e40;
	height: 0.5em;
	width: 0px;
	position: relative;
}

Il nostro cursore ha una larghezza azzerata ed è stato posizionato in modo relativo. Con jQuery abbiamo bisogno di calcolare esattamente la larghezza della voce corrente e il suo offset sinistro rispetto al menu al fine di poter dare al cursore la giusta dimensione e il corretto posizionamento:

$(function() {

  $('li', '#navigation').each(function() {
  
    var $li = $(this);
    var $a = $('a', $li);
    var width = $li.width();
    var left = $li.position().left;
    
    $a.mouseover(function() {
    
    
      $('#cursor', '#navigation').animate({
        width: width,
        left: left
      }, 'slow');
    
    
    
    });
    
  
  
  
  });

});

Potete visionare l'effetto finale in questa pagina.