Lo script che presentiamo permette di creare un menù a scomparsa attivabile tramite un link testuale o d'immagine. Il menù entrerà nella pagina muovendosi da sinistra verso destra.
L'esempio si compone di 1 file:
- esempio.htm
- icon.gif
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Prima di tutto impostiamo i fogli di stile tra i tag <head> della pagina:
<style>
#menuShow{
border: 1px solid #ff0000;
background-color: #c6c6c6;
padding: 12px;
font-size: 13px;
font-family: tahoma, Arial;
position: absolute;
width: auto;
height: auto;
}
#menuSelect{
border: 1px solid #ff0000;
background-color: #c6c6c6;
padding: 13px;
font-size: 13px;
font-family: Verdana, Arial;
position: absolute;
width: auto;
height: auto;
}
</style>
Lo script che gestisce il menù questa volta va inserito nel <body> della pagina, subito dopo i <div> che contengono le voci del menù stesso. Ecco come:
<div id="menuSelect">
<a href="#" onClick="moveOnMenu();moveOffSelector()">
<img src="icon.gif" width="28" height="28" border="0"/></a>
</div>
<div id="menuShow">
<a href="#" onClick="moveOffMenu();moveOnSelector()">
<img src="icon.gif" width="28" height="28" border="0"/></a>
<a href="http://www.html.it">Html.it</a><br />
<a href="http://linux.html.it">Linux</a><br />
<a href="http://programmazione.html.it">Programmazione</a>
<a href="https://download.html.it">Download</a><br />
<a href="http://free.html.it">Free</a><br />
</div>
<script type="text/javascript" language="javascript">
Show ="no";
var OffX = -150;
var PosX = 50;
var PosY = 50;
var speed = 1;
var increment = 2;
var incrementNS4 = 5;
var is_NS = navigator.appName=="Netscape";
var is_Ver = parseInt(navigator.appVersion);
var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;
var is_NS5up = is_NS&&is_Ver>=5;
var MenuX=OffX;
var SelX=PosX;
var sPosX=PosX;
var sOffX=OffX;
if (Show=="yes"){
sPosX=OffX;
sOffX=PosX;
MenuX=sOffX;
SelX=sPosX;
}
if (is_NS4){
increment=incrementNS4;
Lq="document.layers.";
Sq="";
eval(Lq+'menuSelect'+Sq+'.left=sPosX');
eval(Lq+'menuShow'+Sq+'.left=sOffX');
eval(Lq+'menuSelect'+Sq+'.top=PosY');
eval(Lq+'menuShow'+Sq+'.top=PosY');
}else{
Lq="document.all.";
Sq=".style";
document.getElementById('menuSelect').style.left=sPosX+"px";
document.getElementById('menuShow').style.left=sOffX+"px";
document.getElementById('menuSelect').style.top=PosY+"px";
document.getElementById('menuShow').style.top=PosY+"px";
}
function moveOnMenu(){
if (MenuX<PosX){
MenuX=MenuX+increment;
if (is_NS5up){
document.getElementById('menuShow').style.left=MenuX+"px";
}else{
eval(Lq+'menuShow'+Sq+'.left=MenuX');
}
setTimeout('moveOnMenu()',speed);
}
}
function moveOffMenu(){
if (MenuX>OffX){
MenuX=MenuX-increment;
if (is_NS5up){
document.getElementById('menuShow').style.left=MenuX+"px";
}else{
eval(Lq+'menuShow'+Sq+'.left=MenuX');
}
setTimeout('moveOffMenu()',speed);
}
}
function moveOffSelector(){
if (SelX>OffX){
SelX=SelX-increment;
if (is_NS5up){
document.getElementById('menuSelect').style.left=SelX+"px";
}else{
eval(Lq+'menuSelect'+Sq+'.left=SelX');
}
setTimeout('moveOffSelector()',speed);
}
}
function moveOnSelector(){
if (SelX<PosX){
SelX=SelX+increment;
if (is_NS5up){
document.getElementById('menuSelect').style.left=SelX+"px";
}else{
eval(Lq+'menuSelect'+Sq+'.left=SelX');
}
setTimeout('moveOnSelector()',speed);
}
}
</script>
Vediamo adesso come personalizzare sia i colori dei fogli di stile, sia i parametri del menù.
riguardo alla voce #menuShow del foglio di stile:
border: 1px solid #ff0000;
indica lo spessore ed il colore del bordo del menù
background-color: #c6c6c6;
indica il colore di sfondo del menù
padding: 12px;
indica la distanza dal bordo del testo e delle immagini del menù
font-size: 13px;
la grandezza del testo in pixel
font-family: tahoma, Arial;
i caratteri usati per il testo
riguardo alla voce #menuSelect del foglio di stile abbiamo gli stessi paremetri ma in questo caso si riferiscono alla cella di selezione (la cella che viene premuta per far comparire il menù).
Il testo o le immagini che vogliamo far comparire nella cella di selezione devono essere comprese tra i tag <div id="menuSelect"> .... </div>. Ecco l'esempio:
<div id="menuSelect">
<a href="#" onClick="moveOnMenu();moveOffSelector()">
<img src="icon.gif" width="28" height="28" border="0"/></a>
</div>
Importante associare l'evento onClick="moveOnMenu();moveOffSelector()" ad un'immagine o a del testo per far comparire e scomparire il menù.
I collegamenti veri e propri, invece, dovranno essere compresi tra i tag <div id="menuShow">...</div>. Ecco l'esempio:
<div id="menuShow">
<a href="#" onClick="moveOffMenu();moveOnSelector()">
<img src="icon.gif" width="28" height="28" border="0"/></a>
<a href="http://www.html.it">Html.it</a><br />
<a href="http://linux.html.it">Linux</a><br />
<a href="http://programmazione.html.it">Programmazione</a>
<a href="https://download.html.it">Download</a><br />
<a href="http://free.html.it">Free</a><br />
</div>
In questo caso abbiamo associato l'evento onClick="moveOffMenu();moveOnSelector()" ad un'immagine.
Come già detto in precedenza lo script non va inserito tra i tag <head> ma subito dopo il <div> appena analizzato. Vediamo come può essere personalizzato:
Show ="no";
è la stringa che ci permette di scegliere se visualizzare per prima cosa il menù o la cella di selezione. i valori da scegliere sono "no" oppure "yes".
var OffX = -150;
la distanza del menù dal bordo sinistro quando è in modalità nascosta. deve essere un valore negativo per nascondere totalmente il menù.
var PosX = 50;
ci permette di decidere la posizione orizzontale del menù (in pixel)
var PosY = 50;
ci permette di decidere la posizione verticale del menù (in pixel)
var speed = 1;
var increment = 2;
var incrementNS4 = 5;
varibiali che permettono di modificare la velocità di entrata e di uscita del menù. l'ultima riga si riferisce alla velocità per le versioni 4.x di Netscape.
Altre modifiche allo script non sono richieste.
