jQuery: menu dinamico per Wordpress

  • jQuery
  • Gabriele Romanato

Ieri sera ho visionato ub interessante tema di Wordpress che presentava un bell'effetto su un menu creando un cursore con i CSS e spostandolo sulla voce corrente al passaggio del mouse. Ho deciso di ricreare tale effetto con jQuery. Vediamo insieme i dettagli dell'implementazione.

Partiamo dalla seguente struttura HTML:


<div id="navigation">
	<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">Articoli</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contatti</a></li>
		<li><a href="#">Demo</a></li>
		<li><a href="#">Portfolio</a></li>
	</ul>
</div>

All'interno dell'elemento navigation aggiungeremo la seguente struttura con jQuery:


<div id="cursor-wrapper">
	<div id="cursor"></div>
</div>

Avremo bisogno di due valori: la larghezza effettiva dei link di navigazione e l'offset sinistro delle voci di lista. Per ottenere un valore di offset corretto è necessario che la lista di navigazione sia posizionata in modo relativo:


#navigation {
	width: 50%;
	margin: 2em auto;
	font: 100% Georgia, serif;
}

#nav {
	margin: 0;
	padding: 0 0 0 1em;
	list-style: none;
	height: 2em;
	width: 70%;
	position: relative;
}

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

#nav a {
	color: #555;
	text-decoration: none;
	float: left;
	height: 100%;
	padding: 0 1em;
}

#nav a:hover {
	color: #000;
	text-decoration: underline;
	background: #eee;
}

#cursor-wrapper {
	width: 70%;
	height: 10px;
	border: 1px solid;
	position: relative;
}

#cursor {
	display: none;
	background: #000;
	height: 10px;
	position: absolute;
}

Quando l'utente muove il mouse su un link, appare il cursore che si sposta sotto il link corrente e quindi scompare quando l'utente allontana il mouse. Per evitare che le animazioni si accavallino, occorre usare il metodo stop():


$(function() {

	$('<div id="cursor-wrapper"/>').
	html('<div id="cursor"/>').
	appendTo('#navigation');

	$('li', '#nav').each(function() {
	
		var $li = $(this);
		var $a = $('a', $li);
		var left = $li.position().left;
		var width = $a.outerWidth();
		var cursor = $('#cursor');
		
		$a.hover(function() {
		
			cursor.stop(true, true).animate({
				width: width,
				visibility: 'show',
				left: left
			}, 'slow');	
		
		
		}, function() {
		
			cursor.stop(true, true).animate({
				visibility: 'hide'
			}, 'slow');	
		
		
		
		});
		
	
	
	});	


});

La larghezza dei link è stata ottenuta tramite il metodo outerWidth(), che ci consente di calcolare anche il padding, i margini e i bordi eventualmente aggiunti agli elementi. Potete visionare l'esempio finale in questa pagina.

Torna su