- Home Page
- > Script JavaScript
- > Script JavaScript Menu
- > Menu ad Albero
Menu ad Albero
Menu ad albero, per pagine con frame.
¤ Clicca qui per visualizzare la demo... ¤
<HTML>
<HEAD>
<TITLE>Esplora Risorse</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="menu.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
var nascosto = new Array();
for (c=1; c<=i; c++)
{
if (elemento[c].livello==1)
nascosto[c] = false;
else
nascosto[c] = true;
}
function disegna()
{
var code = '';
code += '<TABLE BORDER=0><TR><TD NOWRAP>';
code += '<A HREF="' + elemento[1].link + '" TARGET="main">';
if (elemento[1].icona=='')
code += '<IMG SRC="home.gif" ALIGN="left" BORDER=0>';
else
code += '<IMG SRC="' + elemento[1].icona + '" ALIGN="left" BORDER=0>';
code += elemento[1].nome + '</A><BR>';
for (c=2; c<=i; c++)
{
if (!nascosto[c])
{
var app = elemento[c];
for (k=2; k<=app.livello; k++)
code += '<IMG SRC="i.jpg" ALIGN="left" BORDER=0>';
if (app.foglia)
{
if (c!=i && app.livello==elemento[c+1].livello)
code += '<IMG SRC="t.jpg" ALIGN="left" BORDER=0>';
else
code += '<IMG SRC="l.jpg" ALIGN="left" BORDER=0>';
if (app.icona=='') app.icona = 'html.jpg';
code += '<A HREF="' + app.link + '" TARGET="main">';
code += '<IMG SRC="' + app.icona + '" ALIGN="left" BORDER=0> ';
}
else
{
if (nascosto[c+1])
code += '<A HREF="javascript: apri(' + c + ')"><IMG SRC="xl.jpg" ALIGN="left" BORDER=0></A><IMG SRC="cartella1.jpg" ALIGN="left" BORDER=0> ';
else
code += '<A HREF="javascript: chiudi(' + c + ')"><IMG SRC="-l.jpg" ALIGN="left" BORDER=0></A><IMG SRC="cartella2.jpg" ALIGN="left" BORDER=0> ';
}
code += app.nome + '</A><BR>';
}
}
code += '</TD></TR></TABLE>';
if (document.all)
esplora.innerHTML = code;
else
{
document.layers.esplora_nn.document.open();
document.layers.esplora_nn.document.write(code);
document.layers.esplora_nn.document.close();
}
}
function apri(n)
{
var c = n + 1;
while (elemento[c].livello>elemento[n].livello)
c++;
for(k=n+1; k<c; k++)
if (elemento[k].livello==elemento[n].livello + 1)
nascosto[k] = false;
disegna();
}
function chiudi(n)
{
var c = n + 1;
while (elemento[c].livello>elemento[n].livello)
c++;
for(k=n+1; k<c; k++)
nascosto[k] = true;
disegna();
}
</SCRIPT>
<STYLE>
<!--
A {text-decoration: none; color: black}
A:hover {color: red}
-->
</STYLE>
<BODY ONLOAD="disegna()" LINK="black" VLINK="red" ALINK="black">
<LAYER NAME="esplora_nn">
</LAYER>
<DIV ID="esplora">
</DIV>
</BODY>
</HTML>
File menu.js
function voce(livello,nome,link,icona,foglia)
{
this.livello = livello;
this.nome = nome;
this.link = link;
this.icona = icona;
this.foglia = foglia;
}
var elemento = new Array()
var i = 0;
elemento[++i] = new voce(0,'Home Page','home.htm','',true);
elemento[++i] = new voce(1,'Introduzione','intro.htm','',true);
elemento[++i] = new voce(1,'Fotografie','','',false);
elemento[++i] = new voce(2,'Foto 1','foto1.htm','',true);
elemento[++i] = new voce(2,'Foto 2','foto2.htm','',true);
elemento[++i] = new voce(2,'Foto 3','foto3.htm','',true);
elemento[++i] = new voce(1,'Links','',''',false);
elemento[++i] = new voce(2,'Software','','',false);
elemento[++i] = new voce(3,'Macromedia','www.macromedia.it','',true);
elemento[++i] = new voce(3,'Netscape','www.netscape.com','',true);
elemento[++i] = new voce(2,'Musica','','',false);
elemento[++i] = new voce(3,'Iron Maiden','','',true);
elemento[++i] = new voce(3,'Megadeth','','',true);
A colpo d'occhio
Be Responsive
HTML 5
HTML 5 è un linguaggio di markup utilizzato per la strutturazione e il contenuto delle pagine Web.
CSS 3
CSS 3 è l'ultima evoluzione dei fogli di stile CSS. Contiene molte novità come angoli arrotondati, ombre, sfumature, transizioni o animazioni.
jQuery
jQuery è una libreria JavaScript cross-platform progettata per semplificare lo scripting lato client.