Ho corretto il codice. Ecco le novità:
1: Ho fatto l'apparizione del menu con il passaggio del mouse
2: Ho fatto in modo che spostando il mouse fuori dal menu questo sparisca
3: Ho usato la possibilità di mettere tag HTML sulle posizioni di menu
4: Ho utilizzato i fogli di stile incorporato per avere tutte le voci identiche
Ecco le domande che mi sono rimaste:
1: Come si fa il porting verso tutti i browser?
2: Perché il codice
<DIV id="A"><DIV id="B">xxxxxxx</DIV>
<DIV id="C">y<SPAN align="right">z</SPAN></DIV></DIV>
mi mette le lettere y e z appiccicate?
3: Perché non funziona lo stile :link? Ho dovuto mettere lo stile menulink...
Ecco la nuova pagina HTML:
codice:
<HTML>
<HEAD>
<SCRIPT Language="JavaScript" src="MenuArray.js">
</SCRIPT>
<SCRIPT Language="JavaScript">
NS4=(document.layers) ? true : false;
IE4=(document.all)?true:false;
ver4 = (NS4 || IE4) ? true : false;
MaxIndentLev = 999;
ActiveIndentLev = -1;
function popup(ParentPopUp, IndentLev, XMin, e) {
ActiveIndentLev = IndentLev;
// Salva la posizione del mouse. Il nuovo menu sarà qui:
var xPos = ((NS4) ? e.pageX : event.x) - 10;
var yPos = ((NS4) ? e.pageY : event.y) - 10;
// Se sono abbastanza spostato:
if ( xPos >= XMin )
// Controllo che l'oggetto MenuItem sia fatto bene
if( !MenuItem[ParentPopUp] ) alert('Menu troppo alto');
else if ( MenuItem[ParentPopUp].Type == 'Link' ) alert('TipoMenu errato');
else {
// Ha sottomenu. Li cerco e li scrivo in un div DHTML nella posizione del mouse
NewTxt = '<DIV ID="Prova' + (IndentLev) + '" ' +
'Style="border:1px solid black; padding:0 0 0 0; ' +
'Position:absolute; Top:' + yPos + '; Left:' + xPos + ';" '+
'onMouseMove="ActiveIndentLev=' + (IndentLev + 1) + ';">\n';
// ci scrivo tutti i sottoelementi
for(i = 0; i < MenuItem[ParentPopUp].SubItems.length; i++) {
Index = MenuItem[ParentPopUp].SubItems[i]; // cerco il sottoelemento
// Controllo che l'elemento esista
if ( !MenuItem[Index] ) alert('Sottomenu non trovato');
else {
Elmt = MenuItem[Index];
if ( Elmt.Type == 'SubMenu' )
// Il sottoelemento è un menu. Scrivo il collegamento per poterlo aprire
NewTxt += '<Div Class="' + ((Elmt.Title.indexOf('<')>=0)?'MenuObject':'Menu') +
'" onMouseMove="popup(' + Index + ', ' + (IndentLev + 1) + ', ' +
(xPos + Elmt.MinX) + ', event);">' + Elmt.Title +
'<SPAN Align="Right">></SPAN></DIV>\n';
else
// Il sottoelemento è un link, ne scrivo il collegamento
NewTxt += '<Div Class="' + ((Elmt.Title.indexOf('<')>=0)?'MenuObject':'Menulink') +
'" onMouseMove="ActiveIndentLev=' + (IndentLev + 1) + ';" ' +
'onClick="document.URL=\'' + Elmt.LinkTo.replace(/\\/g, '\\\\') + '\'">' +
Elmt.Title + '</Div>\n';
}
}
NewTxt += '</DIV>'
// Aggiorno il Div di quel livello di menu
document.all['Prova' + IndentLev].outerHTML = NewTxt;
// se non esiste il livello successivo lo creo
if ( !document.all['Prova' + (IndentLev + 1) ] )
document.body.innerHTML += '<DIV ID="Prova' + (IndentLev + 1) + '"></DIV>\n';
}
else ActiveIndentLev -= 1; // PosX è troppo bassa. Cancello il menu successivo se c'è
// se ci sono altri livelli successivi, li cancello (ovvero ci scrivo una stringa vuota)
for (i = ActiveIndentLev + 1; i < MaxIndentLev; i++)
if (document.all['Prova' + i])
document.all['Prova' + i].outerHTML = '<DIV ID="Prova' + i + '"></DIV>\n';
else break;
}
function popdown() { // Cancellazione di tutti i menu
if ( ActiveIndentLev == -5 )
// Cancello i menu solo se ho spostato il mouse per un po' sul vuoto...
for (i = 0; i < MaxIndentLev; i++)
if (document.all['Prova' + i])
document.all['Prova' + i].outerHTML = '<DIV ID="Prova' + i + '"></DIV>\n';
else break;
else if (ActiveIndentLev >= 0 ) ActiveIndentLev = -1; else ActiveIndentLev -= 1;
}
</SCRIPT>
<STYLE type="text/css">
.Menu:link {
background-color:#cccccc;
padding:0 6 0 2;
text-decoration: none;
color:red;
}
.Menulink {
background-color:#cccccc;
padding:0 6 0 2;
text-decoration: none;
color:red;
}
.Menu {
background-color:#cccccc;
padding:0 6 0 2;
text-decoration: none;
color:black;
}
.MenuObject {
background-color:#cccccc;
padding:0 0 0 0;
text-decoration: none;
color:black;
}
</STYLE>
</HEAD>
<BODY onMouseMove="popdown();">
<A onMouseMove="popup(0, 0, 30, event);">Menu</A>
<A onMouseMove="popup(8, 0, 40, event);">AltroMenu</A>
<DIV ID="Prova0"></DIV>
</BODY>
E questo è il nuovo esempio di costruzione di un menu:
codice:
var MenuItem = new Array();
// L'Object 0 serve solamente per definire quali saranno i menu sul primo livello
// È quello che fa finta di essere il collegamento sulla pagina HTML
// Ovvero <A onMouseMove="popup(«0», 0, 30, event);">Menu</A>
MenuItem[0] = new Object;
MenuItem[0].Title = '';
MenuItem[0].Type = 'SubMenu';
MenuItem[0].SubItems = new Array();
MenuItem[0].SubItems[0] = 1;
MenuItem[1] = new Object;
// Title È l'HTML di ciò che apparirà sul menù.
// Ho scelto così perché ci posso mettere un'immagine, o qualsiasi altra cosa.
// L'esempio può essere una cosa standard. Si consiglia di sostituirlo con un css
MenuItem[1].Title = 'Livello 1';
MenuItem[1].Type = 'SubMenu'; // Type o è SubMenu o è Link
MenuItem[1].MinX = 40; // Distanza tra l'origine del Div e dove appare il sottomenu
// NB: deve essere minore della lunghezza del titolo!!!!
MenuItem[1].SubItems = new Array();
MenuItem[1].SubItems[0] = 2; // Punta a un link
MenuItem[1].SubItems[1] = 7; // Punta a un sottomenu
MenuItem[1].SubItems[2] = 8;
MenuItem[2] = new Object;
// Title È l'HTML di ciò che apparirà sul menù.
// Ho scelto così perché ci posso mettere un'immagine, o qualsiasi altra cosa.
// L'esempio può essere una cosa standard. Si consiglia di sostituirlo con un css
MenuItem[2].Title = 'Scelta 1';
MenuItem[2].Type = 'Link';
MenuItem[2].LinkTo = 'link1.htm'; // A cosa punta la voce del menu
MenuItem[3] = new Object;
MenuItem[3].Title = 'Scelta 2';
MenuItem[3].Type = 'Link';
MenuItem[3].LinkTo = 'link2.htm';
MenuItem[4] = new Object;
MenuItem[4].Title = 'Scelta 3';
MenuItem[4].Type = 'Link';
MenuItem[4].LinkTo = 'link3.htm';
MenuItem[5] = new Object; // Esempio di utilizzo di HTML sul menu
MenuItem[5].Title = '
';
MenuItem[5].Type = 'Link';
MenuItem[5].LinkTo = 'link4.htm';
MenuItem[6] = new Object;
MenuItem[6].Title = 'Archivio Fotografico';
MenuItem[6].Type = 'Link'; // NOTA: le barre rovesciate devono essere escapate!
MenuItem[6].LinkTo = 'http:\\\\xoomer.virgilio.it\\lucmenci\\ArchivioFotografico';
MenuItem[7] = new Object;
MenuItem[7].Title = 'Livello 2 - 2';
MenuItem[7].Type = 'SubMenu';
MenuItem[7].MinX = 70;
MenuItem[7].SubItems = new Array();
MenuItem[7].SubItems[0] = 3;
MenuItem[7].SubItems[1] = 4;
MenuItem[8] = new Object;
MenuItem[8].Title = 'Livello 2 - 3';
MenuItem[8].Type = 'SubMenu';
MenuItem[8].MinX = 70;
MenuItem[8].SubItems = new Array();
MenuItem[8].SubItems[0] = 9;
MenuItem[8].SubItems[1] = 10;
MenuItem[9] = new Object;
MenuItem[9].Title = 'Livello 3 - 1';
MenuItem[9].Type = 'SubMenu';
MenuItem[9].MinX = 70;
MenuItem[9].SubItems = new Array();
MenuItem[9].SubItems[0] = 5;
MenuItem[10] = new Object;
MenuItem[10].Title = 'Livello 3 - 2';
MenuItem[10].Type = 'SubMenu';
MenuItem[10].MinX = 70;
MenuItem[10].SubItems = new Array();
MenuItem[10].SubItems[0] = 6;
Rispondi quotando