Un menu a tendina lo puoi creare anche usando solo i css del tuo template, certo per renderlo un po' accattivante c'č da lavorarci non poco ma con il vantaggio di avere tutto sotto controllo. Poi per aggiungere degli effetti particolari bisognerebbe conoscere bene javascript, soprattutto il dom perchč non potendo modificare l'html diventa difficile richiamare gli elementi della pagina. Io ho escluso effetti speciali ma per un menu semplice a tendina basta il css.
Ti posto un estratto di quello che ho usato io, relativo ai settaggi del menu principale. E' un menu su tre livelli. La seconda parte (a partire dal commento formattazione degli sfondi) che tratta degli sfondi č meno importante, serve solo a renderlo pių accattivante. A creare la struttura a tendina č la prima parte. Il modulo che contiene il menu č all'interno di un div con id menu_principale, da li richiama tutte le voci del menu.
/* STILI DEL MENU PRINCIPALE ORIZZONTALE A TENDINA */
/* FORMATTAZIONE GENERALE ED EFFETTO ROLLOVER */
#menu_principale {
font-size:0.82em;
}
#menu_principale a {
text-decoration:none;
display:block;
}
#menu_principale ul {
margin:0;
padding:0;
list-style:none;
height:2em;
}
#menu_principale>ul>li {
float:left;
}
#menu_principale ul li {
width:131px;
position:relative;
height:2em;
line-height:2em;
}
#menu_principale ul ul {
display:none;
}
#menu_principale ul li:hover ul ,
#menu_principale ul li:focus ul ,
#menu_principale ul li:active ul {
display:block;
}
#menu_principale ul ul ul {
position:absolute;
left:131px;
top:-11px;
display:none;
height:2em;
float:none;
}
#menu_principale ul ul ul li {
display:none;
}
#menu_principale ul li ul li:hover ul li,
#menu_principale ul li ul li:focus ul li,
#menu_principale ul li ul li:active ul li {
display:block;
}
#menu_principale {
text-align:center;
padding-left:200px;
position:absolute;
top:66px;
z-index:10;
}
#menu_principale ul ul {
padding-top:6px;
}
/* FORMATTAZIONE DEGLI SFONDI */
#menu_principale ul li:hover ,
#menu_principale ul li:focus ,
#menu_principale ul li:active {
background:url(../images/voce_hover.gif) no-repeat center;
}
#menu_principale ul li.current,
#menu_principale ul li.active,
#menu_principale ul li.current:hover ,
#menu_principale ul li.current:focus ,
#menu_principale ul li.current:active,
#menu_principale ul li.active:hover ,
#menu_principale ul li.active:focus ,
#menu_principale ul li.active:active {
background:url(../images/voce_attiva.gif) no-repeat center;
}
#menu_principale ul ul li,
#menu_principale ul ul ul li {
background:#fff url(../images/voce_sotto.gif) no-repeat center;
}
#menu_principale ul ul li:hover ,
#menu_principale ul ul li:focus ,
#menu_principale ul ul li:active,
#menu_principale ul ul ul li:hover ,
#menu_principale ul ul ul li:focus ,
#menu_principale ul ul ul li:active {
background:#fff url(../images/voce_sotto_hover.gif) no-repeat center;
}
#menu_principale ul ul li.current:hover ,
#menu_principale ul ul li.current:focus ,
#menu_principale ul ul li.current:active,
#menu_principale ul ul li.active:hover ,
#menu_principale ul ul li.active:focus ,
#menu_principale ul ul li.active:active,
#menu_principale ul ul ul li.current:hover ,
#menu_principale ul ul ul li.current:focus ,
#menu_principale ul ul ul li.current:active,
#menu_principale ul ul ul li.active:hover ,
#menu_principale ul ul ul li.active:focus ,
#menu_principale ul ul ul li.active:active {
background:#fff url(../images/voce_sotto_hover.gif) no-repeat center;
}
#menu_principale ul ul li.current,
#menu_principale ul ul li.current,
#menu_principale ul ul li.current,
#menu_principale ul ul li.active,
#menu_principale ul ul li.active,
#menu_principale ul ul li.active,
#menu_principale ul ul ul li.current,
#menu_principale ul ul ul li.current,
#menu_principale ul ul ul li.current,
#menu_principale ul ul ul li.active,
#menu_principale ul ul ul li.active,
#menu_principale ul ul ul li.active {
background:#fff url(../images/voce_sotto_active.gif) no-repeat center;
}
/* ARROTONDAMENTO SULLO SFONDO BIANCO DEI SOTTO MENU */
#menu_principale ul ul, #menu_principale ul ul ul {
background:url(../images/sotto_menu.gif) no-repeat bottom;
height:auto;
padding-bottom:5px;
}
#menu_principale ul ul ul li:first-child {
background:url(../images/sopra_menu.gif) no-repeat top;
padding-top:5px;
}
#menu_principale ul ul ul li:first-child:hover, #menu_principale ul ul ul li:first-child:hover.active {
background:url(../images/sopra_menu_hover.gif) no-repeat top;
}
#menu_principale ul ul ul li:first-child.active {
background:url(../images/sopra_menu_active.gif) no-repeat top;
}
#menu_principale ul ul li:first-child ul li:first-child {
background:#fff url(../images/voce_sotto.gif) no-repeat center;
height:28px;
padding-bottom:4px;
top:5px;
}
#menu_principale ul ul li:first-child ul li:first-child:hover, #menu_principale ul ul li:first-child ul li:first-child:hover.active {
background:#fff url(../images/voce_sotto_hover.gif) no-repeat center;
}
#menu_principale ul ul li:first-child ul li:first-child.active {
background:#fff url(../images/voce_sotto_active.gif) no-repeat center;
}
