Barra laterale
programmazione:jquery:menu_caricamento_remoto
Indice
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.
<div class="pobmenu"> <ul> <li page="menu0.html">Menu0</li> <li page="menu1.html">Menu1</li> <li page="menu2.html">Menu2</li> </ul> <div id="pobboard"></div> </div>
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 :) ).
<html > <head> <meta charset="utf-8"> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <title>Esperimento</title> <style> /*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; } </style> <script> $( document ).ready(function() { $(".pobmenu ul li").bind("mouseenter", function(){ url=$(this).attr("page"); $(".pobmenu #pobboard").load(url); }); $("#pobboard").bind("mouseleave click", function(){ $("#pobboard").html(''); }); }); </script> </head> <body><h1>Menu a caricamento remoto</h1> <div class="pobmenu"> <ul> <li page="menu0.html">Menu0</li> <li page="menu1.html">Menu1</li> <li page="menu2.html">Menu2</li> </ul> <div id="pobboard"></div> </div> <!-- Il resto della pagina --> <div style="width: 900px; background-color: yellow"> <p>Il resto della pagina</p> <p>Bla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaa</p> <p>Bla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaa</p> <p>Bla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaaBla...bal blaa</p> </div> </body> </html>
programmazione/jquery/menu_caricamento_remoto.txt · Ultima modifica: 18/04/2018 - 15:49 (modifica esterna)
Strumenti Pagina
Ad eccezione da dove è diversamente indicato, il contenuto di questo wiki è soggetto alla seguente licenza: CC Attribution-Share Alike 4.0 International
