JavaScript  »  Articoli  »  JQuery 

In questo articolo ci occuperemo della realizzazione di un template HTML, perfettamente funzionante e completo di Javascript e CSS, con un layout non convenzionale a scorrimento orizzontale, ideale per un portfolio personale o una galleria fotografica. In partenza non posso non citare The Horizzontal Way, la splendida collezione di siti orizzontali di Marco Rosella, un'ottima risorsa di ispirazione. Le tecniche dell'esempio che applicheremo tra poco derivano invece da due tutorial scovati su CSS-Tricks e The Web Squeeze.

Allo scopo di attuare lo scorrimento orizzontale e la comparsa della barra, la soluzione più classica consiste nell'impostare arbitrariamente la larghezza del body o di un elemento contenitore ad un valore molto elevato (3000-10000 px), e nel rendere flottanti le varie sezioni del contenuto. In questo modo però, si finisce per pregiudicare la flessibilità del documento, in cui invece il flusso dei contenuti dovrebbe essere libero di espandersi in larghezza, come viceversa avviene in altezza per un layout con andamento classico verticale.

Per ovviare a questa problematica, invece di fissare la larghezza del body, ricorreremo a poche righe di codice Javascript: il metodo prevede essenzialmente di inserire nel documento una tabella tramite i metodi DOM di JQuery e di racchiudere le sezioni del contenuto in molteplici celle di una lunghissima riga. Tutto questo, in modo assolutamente non intrusivo: infatti, con Javascript disabilitato, i contenuti della pagina verranno visualizzati nel browser seguendo il normale flusso di scorrimento dall'alto in basso, con un downgrade che non pregiudica la fruibilità.

La struttura HTML e gli stili CSS

Per il template sono stati impiegati alcuni dei nuovi tag HTML5, come header, footer, section, article e figure; la struttura delle due pagine realizzate è composta essenzialmente da tre elementi principali:

• header, (può contenere il logo o titolo del sito e il menu di navigazione), posizionato in maniera da rimanere fisso allo scorrere del documento;
• footer, anch'esso posizionato in modo analogo all'header, ma questa volta collocato in fondo alla pagina;
• container, un blocco libero di espandersi in larghezza in funzione dei contenuti veri e propri delle pagine: immagini con didascalia (figure), articoli di testo (article), etc).

<header>
	<h1 id="logo">Horizontal5</h1>
	<nav> 		
		<ul> 			
			<li><a class="selected" href="index.html" title="gallery">gallery</a></li> 			
			<li><a href="blog.html" title="blog ">blog</a></li> 			
			<li><a href="mailto:info@yoursite.com">info</a></li>		 		
		</ul>
	</nav>    
</header>
<section id="container">
	<figure>
		<img src="images/aereo.jpg" alt="mezzo di soccorso aereo">
		<figcaption>Aereo di soccorso antincendio, Cefalonia, Grecia.</figcaption>
	</figure> 	 	
	<figure>
		<img src="images/incendio.jpg" alt="speginimento incendio">
		<figcaption>Speginimento incendio, Cefalonia, Grecia.</figcaption>
	</figure>
	<figure>   		
		<img src="images/fumo.jpg" alt="speginimento incendio">
		<figcaption>Speginimento incendio, Cefalonia, Grecia.</figcaption>
	</figure>
</section>
<footer>
	<p>2010 - <a href="http://html.it">HTML.IT</a></p>  
</footer>

Altri articoli

Altre guide

Altre newsletter