Cerco di studiarmelo pezzo-pezzo scrivendo qui gli appunti.
Sono ancora lontano dal leggere gli script come se si trattasse di lingua italiana... Al momento attuale leggo più speditamente l'arabo...
La prima funzione che viene eseguita inizia così:
function initLeftMenu()
{
var menuObj = document.getElementById('dhtmlgoodies_menu');
var mainMenuItemArray = new Array();
var mainMenuItem = menuObj.getElementsByTagName('LI')[0];
while(mainMenuItem){
if(mainMenuItem.tagName && mainMenuItem.tagName.toLowerCase()=='li'){
mainMenuItemArray[mainMenuItemArray.length] = mainMenuItem;
var aTag = mainMenuItem.getElementsByTagName('A')[0];
if(showSubOnMouseOver)
aTag.onmouseover = showSub;
else
aTag.onclick = showSub;
}
mainMenuItem = mainMenuItem.nextSibling;
}
L'HTML è questo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Menu slide-out</title> <script type="text/javascript" src="slideout.js"></script> <link rel="stylesheet" type="text/css" href="slideout.css" /> </head><body> <div id="dhtmlgoodies_menu"> <ul> <li><a href="#">Siti</a> <ul> <li><a href="#">Grafica</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">Web Design</a></li> </ul> </li> <li><a href="#">Servizi</a> <ul> <li><a href="#">Download</a></li> <li><a href="#">Webtool</a></li> <li><a href="#">Font.it</a></li> <li><a href="#">Corsi</a></li> </ul> </li> <li><a href="#">Forum</a> <ul> <li><a href="#">HTML/XHTML</a></li> <li><a href="#">ASP</a></li> <li><a href="#">PHP</a></li> </ul> </li> <li><a href="#">Contatti</a></li> </ul> </div> </body> </html>
Cerchiamo di analizzarcelo riga per riga...
function initLeftMenu()
{
var menuObj = document.getElementById('dhtmlgoodies_menu');
La prima funzione ad essere eseguita è initLeftMenu.All'interno di questa funzione, la variabile menuObj viene usata per denominare l'elemento che ha per id dhtmlgoodies_menu, ossia il seguente:
<div id="dhtmlgoodies_menu"> <ul> <li><a href="#">Siti</a> <ul> <li><a href="#">Grafica</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">Web Design</a></li> </ul> </li> <li><a href="#">Servizi</a> <ul> <li><a href="#">Download</a></li> <li><a href="#">Webtool</a></li> <li><a href="#">Font.it</a></li> <li><a href="#">Corsi</a></li> </ul> </li> <li><a href="#">Forum</a> <ul> <li><a href="#">HTML/XHTML</a></li> <li><a href="#">ASP</a></li> <li><a href="#">PHP</a></li> </ul> </li> <li><a href="#">Contatti</a></li> </ul> </div>...che sarebbe quello che contiene tutta la lista che dovrà formare il menu e i sottomenu.
Quindi, ricordiamo: menuObj è il DIV contenente tutti i menu.
var mainMenuItemArray = new Array();Viene usata la variabile mainMenuItemArray per creare un Array.
Il nome di questa variabile sarebbe "Array degli elementi del menu principale"... Vedremo...
Per ora teniamo presenti questi due nomi:
- menuObj che sarebbe il DIV contenente tutti i menu;
- mainMenuItemArray che sarebbe l'Array degli elementi del menu principale (credo).
var mainMenuItem = menuObj.getElementsByTagName('LI')[0];
Ecco un'altra variabile: mainMenuItem, ossia "elemento del menu principale", che prende dall'oggetto menuObj, ossia dal DIV contenente i menu, il primo elemento LI, cioè questo:
<li><a href="#">Siti</a>
...continua...
Nessun commento:
Posta un commento