Ajax: menù a comparsa

giorgiotave

Ajax: menù a comparsa

Salve ragazzi,

sarebbe bello riuscire a realizzare un piccolo tutorial qui nel Forum GT e metterlo a disposizione degli utenti, per mostrare
come realizzare un menù a comparsa.

Cioè, pensiamo di avere ad esempio:

Calabria | Lazio | Piemonte

Ecco, quando si clicca su Calabria viene mostrato il link Reggio, Catanzaro e Vibo, quando si clicca su Piemonte viene
mostrato Alessandria, Torino, Novi Ligure.

Giorgio

gorka

Io ci ho provato ;), vi posto i codici.

Inizia il file HTML in maniera tradizionale:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Menu a comparsa utilizzando tecniche AJAX</title>
```Inizializzo le funzioni in javascript che mi permettono di utilizzare AJAX

// inizializzo le funzioni basilari di AJAX

var myRequest = null;

function myHandler() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
e = document.getElementById("provincia");
e.innerHTML = myRequest.responseText;
}
}

function provincia(regione){
var e = document.getElementById("provincia");
myRequest = CreateXmlHttpReq(myHandler);
myRequest.open("GET","provincia.php?regione="+escape(regione));
myRequest.send(null);

}
</script>

            }
#provincia { border-style: solid;
            border-width: 1px;
            border-color: green;
            width: 200px;
            float: left;
            margin-left: 250px;
            }

</style>
</head>

<body>

<div id="regioni">
    <span onmouseover="provincia('sicilia')" >Sicilia</span><br/>
    <span onmouseover="provincia('calabria')" >Calabria</span><br/>
    <span onmouseover="provincia('lazio')" >Lazio</span>
    
</div>

<div id="provincia">
    Seleziona una regione
</div>

</body>
</html>

<?php
$regione = $_GET[regione];
switch ($regione) {
case sicilia:
echo ("Agrigento<br>Caltanissetta<br>Catania<br>Enna<br>Messina<br>Palermo<br>Ragusa<br>Siracusa<br>Trapani<br>");
break;
case calabria:
echo "Catanzaro<br>Cosenza<br>Crotone<br>Reggio Calabria<br>Vibo Valentia";
break;
case lazio:
echo "Frosinone<br>Latina<br>Rieti<br>Roma<br>Viterbo";
break;
case vuota:
echo "Seleziona una regione";
break;

?>


Per dubbi, suggerimenti e critiche sono a disposizione :ciauz:

fusionman

Gorka...il tuo è gia perfettamente funzionante. Bisogna solo impaginarlo ed aggiungere qualche piccolezza (tipo l'onmouseout temporizzato per la scomparsa) e testarlo un po.
Bel lavoro.

simo.liv

Bravo davvero

d.royal

Io invece propongo il seguente menù a comparsa (Javascript) ;):

ie=document.all ? 1 : 0
n=document.layers ? 1 : 0
// Setta in pixel la parte visibile del cassetto
lshow=18
// Di quanti pixel vuoi che si sposti il cassetto ad ogni passo?
var move=10;
// Setta la velocità
menuSpeed=40
// Vuoi che il cassetto si sposti insieme allo scroll della pagina?
var moveOnScroll=true
// Adesso non cambiare più niente
var tim;

function makeMenu(obj,nest)
{
nest=(!nest) ? '' : 'document.' + nest + '.'
this.css=(n) ? eval(nest+'document.'+obj) : eval(obj+'.style')
this.state=1
this.go=0
this.height=n ? this.css.document.height : eval(obj+'.offsetHeight')
this.top=b_gettop
this.obj = obj + "Object";
eval(this.obj + "=this")
}

function b_gettop()
{
var gleft=(n) ? eval(this.css.top) : eval(this.css.pixelTop);
return gleft;
}

function moveMenu()
{
if(!oMenu.state)
{
clearTimeout(tim)
mIn()
}
else
{
clearTimeout(tim)
mOut()
}
}

function mIn()
{
if(oMenu.top()>eval(scrolled)-oMenu.height+lshow)
{
oMenu.go=1
oMenu.css.top=oMenu.top()-move
tim=setTimeout("mIn()",menuSpeed)
}
else
{
oMenu.go=0
oMenu.state=1
}
}

function mOut()
{
if(oMenu.top()<eval(scrolled))
{
oMenu.go=1
oMenu.css.top=oMenu.top()+move
tim=setTimeout("mOut()",menuSpeed)
}
else
{
oMenu.go=0
oMenu.state=0
}
}

function checkScrolled()
{
if(!oMenu.go)
oMenu.css.top=(!oMenu.state) ? eval(scrolled) : eval(scrolled)-oMenu.height+lshow
if(n)
setTimeout('checkScrolled()',30)
}

function menuInit()
{
oMenu=new makeMenu('divMenu')
scrolled=n ? "window.pageYOffset" : "document.body.scrollTop"
oMenu.css.top=eval(scrolled)-oMenu.height+lshow
oMenu.css.visibility='visible'
if(moveOnScroll)
ie ? window.onscroll=checkScrolled : checkScrolled();
}

onload = menuInit;

</SCRIPT>

Ciao alla prossima raga !!!

Web dreams '07 Progettazione e Creazione siti Web