Avere dei menu che racchiudano testi e immagini in modo tale da farli apparire solo a
richiesta dal visitatore, è una delle possibilità intrinseche di Dynamic Html.
Proprio in questo articolo, prenderemo in considerazione uno di questi script cercando di
approfondire e personalizzare il più possibile il codice sorgente, tenendo sempre presente la demo reperibile cliccando qui (script Slide menù).
Ma apprestiamoci ad aprire il file con un editor di testo qualunque (va bene anche Notepad
per Windows 9x), superati i primi tag di apertura, ci si imbatte in un foglio di stile,
che a prima vista, sembra incoprensibile:
A {color:#000000; font-family:'Arial'; font-size:10pt; line-height:20pt;}
STRONG {font-family:'Arial'; font-size:15pt; font-weight:bold; line-height:25pt;}
P {font-family:'Arial'; font-size:10pt; line-height:13pt;}
Queste prime tre righe di istruzioni, servono per specificare alcuni parametri da utilizzare nei collegamenti ipertestuali e nel testo contenuto all'interno del documento (non sono strettamente necessarie - si possono anche eliminare).
#pulloutInterface {position:absolute; left:50; top:50; width:400; height:250;
clip:rect(0,400,250,0); background-color:#000000; layer-background-color:#000000;
visibility:visible;}
#pulloutSidebar1 {position:absolute; left:5; top:5; width:100; height:30;
clip:rect(0,100,30,0); background-color:#DEDEDE; layer-background-color:#DEDEDE;}
#pulloutSidebar2 {position:absolute; left:5; top:40; width:100; height:30;
clip:rect(0,100,30,0); background-color:#C5C5C5; layer-background-color:#C5C5C5;}
#pulloutSidebar3 {position:absolute; left:5; top:75; width:100; height:30;
clip:rect(0,100,30,0); background-color:#A2A2A2; layer-background-color:#A2A2A2;}
#pulloutSidebar4 {position:absolute; left:5; top:110; width:100; height:30;
clip:rect(0,100,30,0); background-color:#7E7E7E; layer-background-color:#7E7E7E;}
Queste righe invece, acquistano una maggiore importanza perché serve per indicare gli attributi dei tasti che si trovano a sinistra (nel nostro esempio) della pagina. È qui che bisogna intervenire se si volesse modificare in qualche modo i bottoni che fanno apparire i vari layers.
#pulloutContent {position:absolute; left:110; top:5; width:285; height:240;
clip:rect(0,285,240,0); background-color:#000000; layer-background-color:#000000;}
#pulloutContent1 {position:absolute; left:0; top:0; width:285; height:240;
clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE;
visibility:visible;}
#pulloutContent2 {position:absolute; left:-285; top:0; width:285; height:240;
clip:rect(0,285,240,0); background-color:#C5C5C5; layer-background-color:#C5C5C5;
visibility:hidden;}
#pulloutContent3 {position:absolute; left:-285; top:0; width:285; height:240;
clip:rect(0,285,240,0); background-color:#A2A2A2; layer-background-color:#A2A2A2;
visibility:hidden;}
#pulloutContent4 {position:absolute; left:-285; top:0; width:285; height:240;
clip:rect(0,285,240,0); background-color:#7E7E7E; layer-background-color:#7E7E7E;
visibility:hidden;}
Infine, il terzo blocco dello style, serve per modificare i riquadri che appaiono cliccando sui vari links. Possono essere facilmente sostituite le dimensioni (si faccia riferimento agli attributi width: larghezza, height: altezza e le coordiante racchiuse tra le parentesi), la posizione (si guardi left: distanza in pixel da sinistra e right: distanza in pixel da destra) e il colore di sfondo.
Continuando con l'analisi del documento, immediatamente sotto il foglio di stile appena analizzato, si trova il Javascript necessario all'animazione dei layers, che non bisogna modificare.
Si arriva così al <BODY>; in questa parte, non si farà altro che richimare le funzioni appena descritte nell'<HEAD>. Ma vediamo di presentarle:
<DIV ID="pulloutInterface">
<DIV ID="pulloutSidebar1"><P ALIGN=CENTER><A
HREF="javascript:pullout(pullout1)">Primo
gruppo</A></P></DIV>
<DIV ID="pulloutSidebar2"><P ALIGN=CENTER><A
HREF="javascript:pullout(pullout2)">Secondo
gruppo</A></P></DIV>
<DIV ID="pulloutSidebar3"><P ALIGN=CENTER><A
HREF="javascript:pullout(pullout3)">Terzo
gruppo</A></P></DIV>
<DIV ID="pulloutSidebar4"><P ALIGN=CENTER><A
HREF="javascript:pullout(pullout4)">Quarto
gruppo</A></P></DIV>
Come si può facilmente intuire, queste righe di codice contengono i links al Javascript. In questa parte possono solo essere modificati i nomi dei links (ad esempio, cambiate 'Primo gruppo' in ciò che meglio si addice al vostro sito).
Adesso, l'ultimo blocco di istruzioni personalizzabile, riguarda il conteuto dei vari layer:
<DIV ID="pulloutContent">
<DIV ID="pulloutContent1">
<P ALIGN="CENTER"><STRONG>Primo gruppo</STRONG>
<TABLE BORDER=0 WIDTH=275><TD>
<P>Qui va inserito il testo che vuole richiamare dal menu di sinistra (primo
gruppo).<BR><BR>
<a href="http://www.ipoint2000.net/galileo"><IMG
SRC="galileo_piccolo.gif" WIDTH=87 HEIGHT=21 align=center hspace=5
border=0></a>
</TD></TABLE>
</P>
</DIV>
<DIV ID="pulloutContent2">
<P ALIGN="CENTER"><STRONG>Secondo gruppo</STRONG>
<TABLE BORDER=0 WIDTH=275><TD>
<P>Qui va inserito il testo che vuole richiamare dal menu di sinistra (secondo
gruppo). All'interno del codice puoi trovare dei commenti che aiutano a capire come
personalizzare lo script!
</TD></TABLE>
</P>
</DIV>
<DIV ID="pulloutContent3">
<P ALIGN="CENTER"><STRONG>Terzo gruppo</STRONG>
<TABLE BORDER=0 WIDTH=275><TD>
<P>Qui va inserito il testo che vuole richiamare dal menu di sinistra (Terzo
gruppo). Visita Galileo! Magazine 100% pure DHTML!</TD></TABLE>
</P>
</DIV>
<DIV ID="pulloutContent4">
<P ALIGN="CENTER"><STRONG>Quarto gruppo</STRONG>
<TABLE BORDER=0 WIDTH=275><TD>
<P>Qui va inserito il testo che vuole richiamare dal menu di sinistra (quarto
gruppo).</TD></TABLE>
</P>
</DIV>
</DIV>
Questa parte del codice è estremamente importante, visto che, come si accennava prima, riguarda il contenuto dei vari layers. È possibile personalizzare queste parti, inserendo ciò che ritenete più appropriato, tendendo sempre presente la grandezza del layer (che potete modificare guardando il foglio di stile, spiegato all'inizio di questo articolo).
Clicca qui per vedere l'esempio finale.
