RSS Feed Seguiteci su Twitter! Seguiteci su Facebook!
NEWS: Questo Blog e' rimasto inattivo per più di 18 mesi , quindi possono esserci link non funzionanti o altre problematiche dovute alla mancata manutenzione. Cosa vi piace o non in questo BLOG?, scrivete tutte le vostre recensioni in questa area commenti, provvederemo immediatamente a cancellare il Blog o migliorarlo nelle sue aspettative. Grazie.

Menu a tendina orizzontale in CSS

CercaSoluzione3 Nessun commento

Postiamo per gli utenti un bel menu a tendina con tante descrizioni, da copiare ed incollare. Il menu è modificabile con colori dimensioni e molto altro....


Per prima cosa andiamo sul foglio HTML cerchiamo la stringa <head> o </head> e incolliamo il seguente codice:

<style type="text/css">
.bar { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; vertical-align: middle; font-weight: bold; text-decoration:none;}
.stbar { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #FFFFFF; vertical-align: middle; text-decoration:none;}
</style>
<script language="javascript">

                 /* ****** Sezione personalizzabile ******* */

var QM = 5; /* Il numero decide quanti menu vogliamo presenti nella pagina (lo
script e' predisposto per accettarne fino a 10)   */

var qV1 = 0; /* Quante Voci devono scendere passando il mouse sul primo menu della barra.
                Poiche' abbiamo scelto di NON far scendere la tendina, il numero e' 0 (zero); in tal modo
                rimane un unico pulsante (quello della barra) alla cui pressione, in questo caso, si
                viene condotti alla home page. Per far scendere la tendina e' sufficiente digitare un
                numero diverso da 0. Sono ammesse fino a 10 voci. */

var qV2 = 5; // Quante voci menu 2 (massimo 10)
var qV3 = 4; // Quante voci menu 3
var qV4 = 4; // ecc.
var qV5 = 10;
var qV6 = 5;
var qV7 = 6;
var qV8 = 3;
var qV9 = 2;
var qV10 = 4;


             /* Ciascun menu puo' avere una larghezza indipendente dalle altre,
             tale larghezza viene stabilita nell'array sottostante */

var LM= new Array();
LM[0]=0;
LM[1]=80; // larghezza menu 1 (espressa in pixel)
LM[2]=120; // larghezza menu 2
LM[3]=120; // ecc.
LM[4]=120;
LM[5]=120;
LM[6]=120;
LM[7]=120;
LM[8]=120;
LM[9]=120;
LM[10]=120;

var tC=500; // tempo di chiusura tendina dopo il MouseOver (espresso in millisecondi)
var tso=30; // tempo di successione scomparsa fra una voce e l'altra (espresso in millisecondi)
var cMZ="#000066";  // colore di default della barra dei menu
var cOmZ="#000000"; // colore di ciascun "menu barra" al MouseOver
var cVM="#0066CC";  // colore di default delle voci menu 
var cOV="#990066";  // colore voci al MouseOver

var aTb="center"; // allineamento testo menu ba (possibilita': left, center, right)
var aTv="center"; // allineamento testo voci menu (possibilita': left, center, right)


var AM=16;   // altezza dei menu (espressa in pixel)
var dA=15;   // distanza della barra menu dal margine superiore
var dMo=1;   // distanza fra un menu e l'altro in orizzontale
var dMv=0;   // distanza fra un menu e l'altro in verticale
var dispD=30; // distanza della barra menu dal margine sinistro

AlCentroPagina=false; /* per caricare il menu al centro della pagina
                         sostituire "false" con "true" (senza virgolette) */
                        

var BrdB=0;  // border (barra)
var CspB=0;  // cellspacing (barra)
var CpdB=0;  // cellpadding (barra)

var BrdV=0;  // border (voci)
var CspV=0;  // cellspacing (voci)
var CpdV=0;  // cellpadding (voci)                          

var Voci= new Array();
Voci[0]=0;
Voci[1]=new Array('Home','menu 1 link 1','menu 1 link 2','menu 1 link 3','menu 1 link 4','menu 1 link 5','menu 1 link 6','menu 1 link 7','menu 1 link 8','menu 1 link 9','menu 1 link 10');
Voci[2]=new Array('menu 2','target="_self"','target="_blank"','target="frame"','pop-up','target="_top"','menu 2 link 6','menu 2 link 7','menu 2 link 8','menu 2 link 9','menu 2 link 10');
Voci[3]=new Array('menu 3','menu 3 link 1','menu 3 link 2','menu 3 link 3','menu 3 link 4','menu 3 link 5','menu 3 link 6','menu 3 link 7','menu 3 link 8','menu 3 link 9','menu 3 link 10');
Voci[4]=new Array('menu 4','menu 4 link 1','menu 4 link 2','menu 4 link 3','menu 4 link 4','menu 4 link 5','menu 4 link 6','menu 4 link 7','menu 4 link 8','menu 4 link 9','menu 4 link 10');
Voci[5]=new Array('menu 5','menu 5 link 1','menu 5 link 2','menu 5 link 3','menu 5 link 4','menu 5 link 5','menu 5 link 6','menu 5 link 7','menu 5 link 8','menu 5 link 9','menu 5 link 10');
Voci[6]=new Array('menu 6','menu 6 link 1','menu 6 link 2','menu 6 link 3','menu 6 link 4','menu 6 link 5','menu 6 link 6','menu 6 link 7','menu 6 link 8','menu 6 link 9','menu 6 link 10');
Voci[7]=new Array('menu 7','menu 7 link 1','menu 7 link 2','menu 7 link 3','menu 7 link 4','menu 7 link 5','menu 7 link 6','menu 7 link 7','menu 7 link 8','menu 7 link 9','menu 7 link 10');
Voci[8]=new Array('menu 8','menu 8 link 1','menu 8 link 2','menu 8 link 3','menu 8 link 4','menu 8 link 5','menu 8 link 6','menu 8 link 7','menu 8 link 8','menu 8 link 9','menu 8 link 10');
Voci[9]=new Array('menu 9','menu 9 link 1','menu 9 link 2','menu 9 link 3','menu 9 link 4','menu 9 link 5','menu 9 link 6','menu 9 link 7','menu 9 link 8','menu 9 link 9','menu 9 link 10');
Voci[10]=new Array('menu 10','menu 10 link 1','menu 10 link 2','menu 10 link 3','menu 10 link 4','menu 10 link 5','menu 10 link 6','menu 10 link 7','menu 10 link 8','menu 10 link 9','menu 10 link 10');

var Links=new Array();
Links[0]=0;
Links[1]=new Array('home.htm','menu1link1.htm','menu1link2.htm','menu1link3.htm','menu1link4.htm','menu1link5.htm','menu1link6.htm','menu1link7.htm','menu1link8.htm','menu1link9.htm','menu1link10.htm');
Links[2]=new Array('menu2link0.htm','menu2link1.htm','menu2link2.htm','menu2link3.htm','menu2link4.htm','menu2link5.htm','menu2link6.htm','menu2link7.htm','menu2link8.htm','menu2link9.htm','menu2link10.htm');
Links[3]=new Array('menu3link0.htm','menu3link1.htm','menu3link2.htm','menu3link3.htm','menu3link4.htm','menu3link5.htm','menu3link6.htm','menu3link7.htm','menu3link8.htm','menu3link9.htm','menu3link10.htm');
Links[4]=new Array('menu4link0.htm','menu4link1.htm','menu4link2.htm','menu4link3.htm','menu4link4.htm','menu4link5.htm','menu4link6.htm','menu4link7.htm','menu4link8.htm','menu4link9.htm','menu4link10.htm');
Links[5]=new Array('menu5link0.htm','menu5link1.htm','menu5link2.htm','menu5link3.htm','menu5link4.htm','menu5link5.htm','menu5link6.htm','menu5link7.htm','menu5link8.htm','menu5link9.htm','menu5link10.htm');
Links[6]=new Array('menu6link0.htm','menu6link1.htm','menu6link2.htm','menu6link3.htm','menu6link4.htm','menu6link5.htm','menu6link6.htm','menu6link7.htm','menu6link8.htm','menu6link9.htm','menu6link10.htm');
Links[7]=new Array('menu7link0.htm','menu7link1.htm','menu7link2.htm','menu7link3.htm','menu7link4.htm','menu7link5.htm','menu7link6.htm','menu7link7.htm','menu7link8.htm','menu7link9.htm','menu7link10.htm');
Links[8]=new Array('menu8link0.htm','menu8link1.htm','menu8link2.htm','menu8link3.htm','menu8link4.htm','menu8link5.htm','menu8link6.htm','menu8link7.htm','menu8link8.htm','menu8link9.htm','menu8link10.htm');
Links[9]=new Array('menu9link0.htm','menu9link1.htm','menu9link2.htm','menu9link3.htm','menu9link4.htm','menu9link5.htm','menu9link6.htm','menu9link7.htm','menu9link8.htm','menu9link9.htm','menu9link10.htm');
Links[10]=new Array('menu10link0.htm','menu10link1.htm','menu10link2.htm','menu10link3.htm','menu10link4.htm','menu10link5.htm','menu10link6.htm','menu10link7.htm','menu10link8.htm','menu10link9.htm','menu10link10.htm');

var Trg=new Array(); /* ATTENZIONE. I link funzionano SOLO se per ciascuno di essi viene specificato un target.
                     Per aprire la pag.htm nella finestra corrente scrivere 's' (sta per _self); per una nuova finestra scrivere 'b' (_blank);
                     per un target _top scrivere 't'; per un frame scrivere il 'NomeFrame'; per una popup scrivere 'p'. */
Trg[0]=0;
Trg[1]=new Array('s','','','','','','','','','',''); // relativamente al PRIMO menu abbiamo: target per link 0 (quello della voce sulla barra), di seguito il target per i link 1, 2 , 3, ecc.
Trg[2]=new Array('','s','b','NomeFrame','p','t','','','','',''); // relativamente al SECONDO menu (come sopra)
Trg[3]=new Array('','','','','','','','','','','');
Trg[4]=new Array('','','','','','','','','','','');
Trg[5]=new Array('','','','','','','','','','','');
Trg[6]=new Array('','','','','','','','','','','');
Trg[7]=new Array('','','','','','','','','','','');
Trg[8]=new Array('','','','','','','','','','','');
Trg[9]=new Array('','','','','','','','','','','');
Trg[10]=new Array('','','','','','','','','','','');
/* ****** Fine Sezione personalizzabile ******* */

/*

Da qui in poi eventuali modifiche sono consigliabili solo a chi e' molto esperto di JavaScript, vi invitiamo a non intervenire se non siete sicuri di quel che fate, non vi garantiamo risposta alcuna.
*/

var DL=(document.layers); DA=(document.all); WO=(window.opera);

var TND= new Array(qV1,qV2,qV3,qV4,qV5,qV6,qV7,qV8,qV9,qV10);
var cQV=""; CmB=""; AmB=""; ndcB=""; ndcQVM=""; cQVM=""; VZ="ba100"; 

function Ov(qVOv,NumConB,ql,cOv) {
 window.clearTimeout(CmB);
  if (ql==0) {
     for(cs=ndcQVM; cs>ndcB; cs--) {
     qVcs="ba"+cs;
     (DA)?document.all[qVcs].style.visibility="hidden":(DL)?document.layers[qVcs].visibility="hide":document.getElementById(qVcs).style.visibility ="hidden";
     }
     for (cbg=1; cbg<=QM; cbg++) {
     rip="ba"+cbg+"00";
     (DA)?document.all[rip].style.background=cMZ:(DL)?document.layers[rip].bgColor=cMZ:document.getElementById(rip).style.background=cMZ;
     }
  }

  cQV=qVOv+NumConB;
  cQm="ba"+(ql+NumConB);
  if (ql==0) {
     for (i=NumConB+1; i<=cQV; i++) {
     qualeVoceApro="ba"+i;
     (DA)?document.all[qualeVoceApro].style.visibility="visible":(DL)?document.layers[qualeVoceApro].visibility="show":document.getElementById(qualeVoceApro).style.visibility="visible";
     }
  }
(DA)?document.all[cQm].style.background=cOv:(DL)?document.layers[cQm].bgColor=cOv:document.getElementById(cQm).style.background=cOv;
}

function outMenu(qVOut,ncbo) {
cQVM=cQV;
cQV=qVOut+ncbo;
ndcB=ncbo;
ndcQVM=ncbo+qVOut;
VZ="ba"+ndcB;
   for (b=ncbo+1; b<=cQV; b++) {
   qvB="ba"+b;
   (DA)?document.all[qvB].style.background=cVM:(DL)?document.layers[qvB].bgColor=cVM:document.getElementById(qvB).style.background=cVM;
   }
CmB=setTimeout('cB()',tC);
}

function cB() {
   if (cQVM>ndcB) {
   qvC="ba"+cQVM;
   (DA)?document.all[qvC].style.visibility="hidden":(DL)?document.layers[qvC].visibility="hide":document.getElementById(qvC).style.visibility="hidden";
   cQVM--;
   setTimeout('cB()',tso);
   } else {
   (DA)?document.all[VZ].style.background=cMZ:(DL)?document.layers[VZ].bgColor=cMZ:document.getElementById(VZ).style.background=cMZ;
   cQVM=ndcB;
  }
}
</script>

Adesso bisogna fare il secondo passo, sempre sul foglio HTML cercare la stringa <body> e subito dopo inserire quest'altro codice:

<script language="javascript">
var CU = new Array();
CU[0]=0;
diT=0;

var BrW=(DL||WO)?window.innerWidth:(navigator.userAgent.toLowerCase().indexOf("gecko")!=-1)?document.width:document.body.clientWidth;
var BrH=(DL||WO)?window.innerHeight:(navigator.userAgent.toLowerCase().indexOf("gecko")!=-1)?document.height:document.body.clientHeight;

if (AlCentroPagina==true) {
var M_Length=0;
   for (qmn=1; qmn<=QM; qmn++) {
   M_Length+=LM[qmn];
   }
M_Length=M_Length+(QM-1)*dMo;
dispD=parseInt((BrW-M_Length)/2);
}
  for (ndc=0; ndc<QM; ndc++) {
  CU[CU.length]=CU[ndc]+100;
  uni=ndc+1;
  IDb="ba"+CU[uni];
  dispD=dispD+dMo+LM[ndc];
  ddx=dispD-dMo;
  qV="qV"+uni;
  cu="CU["+uni+"]";
  document.writeln((DL)? '<layer id="'+IDb+'" left="'+ddx+'" top="'+dA+'" width="'+LM[uni]+'" height="'+AM+'" bgcolor="'+cMZ+'" visibility="show" onmouseover="Ov('+qV+','+cu+',0,cOmZ);" onmouseout="outMenu('+qV+','+cu+');"><table width="'+LM[uni]+'" border="'+BrdB+'" cellspacing="'+CspB+'" cellpadding="'+CpdB+'" height="'+AM+'"><tr align="'+aTb+'" valign="middle"><td><a href="javascript:Vai(\''+Links[uni][0]+'\',\''+Trg[uni][0]+'\');" class="bar">'+Voci[uni][0]+'</a></td></tr></table></layer>':'<div id="'+IDb+'" style="position:absolute; width:'+LM[uni]+'px; height: '+AM+'px; background-color:'+cMZ+'; left: '+ddx+'px; top: '+dA+'; visibility: visible" onmouseover="Ov('+qV+','+cu+',0,cOmZ);" onmouseout="outMenu('+qV+','+cu+');" onclick="Vai(\''+Links[uni][0]+'\',\''+Trg[uni][0]+'\');"><table width="'+LM[uni]+'" border="'+BrdB+'" cellspacing="'+CspB+'" cellpadding="'+CpdB+'" height="'+AM+'"><tr align="'+aTb+'" valign="middle"><td style="cursor: pointer"><a href="javascript:Vai(\''+Links[uni][0]+'\',\''+Trg[uni][0]+'\');" class="bar" onFocus="this.blur();">'+Voci[uni][0]+'</a></td></tr></table></div>');
  dispB=dA;
    for (ndcV=0; ndcV < TND[diT]; ndcV++) {
    uniV=ndcV+1;
   IDb="ba"+(CU[uni]+uniV);
   dispB=dispB+dMv+AM;
   document.writeln((DL)? '<layer id="'+IDb+'" left="'+ddx+'" top="'+dispB+'" width="'+LM[uni]+'" height="'+AM+'" bgcolor="'+cVM+'" visibility="hide" onmouseover="Ov('+qV+','+cu+','+uniV+',cOV);" onmouseout="outMenu('+qV+','+cu+');"><table width="'+LM[uni]+'" border="'+BrdV+'" cellspacing="'+CspV+'" cellpadding="'+CpdV+'" height="'+AM+'"><tr align="'+aTv+'" valign="middle"><td><a href="javascript:Vai(\''+Links[uni][uniV]+'\',\''+Trg[uni][uniV]+'\');" class="stbar">'+Voci[uni][uniV]+'</a></td></tr></table></layer>' : '<div id="'+IDb+'" style="position:absolute; width:'+LM[uni]+'px; height: '+AM+'px; background-color:'+cVM+'; left: '+ddx+'px; top: '+dispB+'; visibility: hidden" onmouseover="Ov('+qV+','+cu+','+uniV+',cOV);" onmouseout="outMenu('+qV+','+cu+');" onclick="Vai(\''+Links[uni][uniV]+'\',\''+Trg[uni][uniV]+'\');"><table width="'+LM[uni]+'" border="'+BrdV+'" cellspacing="'+CspV+'" cellpadding="'+CpdV+'" height="'+AM+'"><tr align="'+aTv+'" valign="middle"><td style="cursor: pointer"><a href="javascript:Vai(\''+Links[uni][uniV]+'\',\''+Trg[uni][uniV]+'\');" class="stbar" onFocus="this.blur();">'+Voci[uni][uniV]+'</a></td></tr></table></div>');
    }
  diT++;
  }
function Vai(lnk,tg) {
if (tg=="s"||tg=="t") {
lnko=lnk;
tgT=tg;
setTimeout('rVai()',30);
} else if (tg=="b") {
window.open(lnk,'','width='+BrW+',height='+BrH+',toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,copyhistory=yes');
} else if (tg=="p") {
pp=window.open(lnk,'pp','toolbar=no,location=no,top=50,left=50,width=300,height=300');
pp.focus();
} else if (tg!="" && tg!="s" && tg!="b" && tg!="p" && tg!="t") {
top[tg].location.href=lnk;
    }
}
function rVai() {
  if (tgT=='s') {
  self.location.href=lnko;
  } else {
  top.location.href=lnko;
  }
}
</script>

Spero che vi sia piaciuto il menu e questa guida.
Aspetto vostri commenti.

Postato sotto: ,,
Twitter Delicious Facebook Digg Stumbleupon Favorites More

0 commenti:

Posta un commento

Proponi un'idea, segnalaci un problema.

Entra a far parte di CS3, pubblica i tuoi articoli.

Scrivi un commento!