jQuery: siti orizzontali scrollabili

Per i siti di piccole dimensioni o per i portfolio è possibile combinare jQuery e CSS per ottenere l'effetto di un sito che si estende in orizzontale e il cui menu di navigazione permette alla pagina di scrollare per mostrare le varie sezioni. In breve, un intero sito può essere contenuto in una sola pagina. Vediamo come.

Partiamo dalla seguente struttura HTML:


<ul id="navigation">
	<li><a href="#home" class="current">Home</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#contacts">Contatti</a></li>
</ul>

<div id="home" class="panel">...</div>
<div id="about" class="panel">...</div>
<div id="contacts" class="panel">...</div>

Nel CSS dobbiamo fare in modo che la pagina abbia una larghezza di gran lunga superiore al normale e al contempo il suo overflow orizzontale sia nascosto:


body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	width: 8000px;
	font: 100% Georgia, serif;
}

Per impedire al menu di scrollare con la pagina dobbiamo renderlo fisso:


#navigation {
	margin: 0;
	padding: 0;
	height: 2.6em;
	list-style: none;
	background: #222;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

#navigation li {
	float: left;
	padding: 0 1em;
	height: 100%;
}

#navigation a {
	float: left;
	height: 100%;
	color: #fff;
	text-decoration: none;
	line-height: 2.6;
	padding: 0 0.5em;
	display: block;
}

#navigation a:hover, .current {
	background: #333;
}

Ciascun blocco dovrà avere delle dimensioni che permettano solo al blocco corrente di essere visibile:


div.panel {
	width: 930px;
	float: left;
	padding-left: 30px;
	padding-right: 1040px;
	margin-top: 45px;
}

Con jQuery dobbiamo selezionare il blocco corrente tramite l'hash di ciascun link del menu, evidenziare la voce corrente del menu e usare le proprietà di scroll della pagina per ottenere un effetto di sliding:


$(document).ready(function() {
	$('a', '#navigation').bind('click', function(event){
		event.preventDefault();
		var $a = $(this);
		var target = $a.attr('href');
		           
		$a.addClass('current').parents('ul').find('a').not($a).removeClass('current');	
		           
		$('html, body').stop().animate({
			scrollLeft: $(target).offset().left,
			scrollTop: $(target).offset().top
		}, 1200);
	});
});

Potete visionare l'esempio finale in questa pagina.

Torna su