Esperimento

====== Menu a caricamento remoto con jquery ====== Autore: **//Fabio Di Matteo//** \\ Ultima revisione: **//12/05/2014 - 09:58//** \\ \\ In questo articolo realizzeremo grazie a jquery un menu a caricamento remoto. Ovvero ogni tendina (il contenuto) del menu sara' scaricata da alcuni file esterni. Sotto si puo' vedere una demo del progetto. ===== La struttura html ===== La struttura html necessaria al funzionamento è la seguente. Ovvero una lista (per le voci di menu) e un semplice div (lavagna) per mostrare il contenuto remoto.



	
		Menu0
		Menu1
		Menu2

===== La parte grafica ===== Ogni aspetto che riguarda la grafica viene preso dalle seguenti regole css:


/*Etichette dei menu*/
	.pobmenu >ul >li {
		list-style: none;display: inline;
		margin-left: 5px;
		margin-right:5px;
		font-size:24px;
		background-color:#b5acb5;
		box-shadow: 10px 10px 5px #888888;
		border: 1px Solid #6e6868;
		border-radius:5px 5px 0px 0px ;
		cursor:pointer;
	}
	
	/*Spazio destinato alla visualizzazione del contenuto remoto*/	
	#pobboard{
		float:left;
		position:absolute;
		z-index: 1;
		left: 53px;
		margin-top: -18px;
		border: 1px Solid gray;
		box-shadow: 10px 10px 5px #888888;
		border-radius:5px, 5px, 0px, 0px ;
		background-color: #babdd4;
		
	}

===== La parte jquery =====


$( document ).ready(function() {
	$(".pobmenu ul li").bind("mouseenter", function(){
		url=$(this).attr("page");
		$(".pobmenu #pobboard").load(url);
	});
	
	$("#pobboard").bind("mouseleave click", function(){
		$("#pobboard").html('');	
	});
	
	
});

===== Codice pagina completo ===== Per completezza posto il codice completo della pagina (non il contenuto dei menu, che cmq è semplice html a piacere :) ).






Esperimento





Menu a caricamento remoto 


	
		Menu0
		Menu1
		Menu2
	
	






Il resto della pagina
Bla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaa
Bla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaa
Bla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaa