Newsgroup: it.comp.lang.javascript
Titolo: Aiuto menu

Salve, sto tentando di costruire un menu verticale usando javascript e css.
Le tendine le ho create in html assegnandogli un id con i css e rendendole
hidden per default.
Quando con il mouse, vado sopra il link, chiamo la funzione onmouseover che
non fa altro che risettare quello che era hidden in visible.
Il problema è che se sposto velocemente il mouse da un link all altro, non
sempre spariche la tendina precedente.
Sapete indicarmi esempi funzionanti di menu in javascript, che però non
costruiscono loro le tendide, ma che si limitino a controllarle da css con
setTimeout e cleraTimeout.
Spero di essere stato chiaro, grazie a tutti

 Spero di essere stato chiaro, grazie a tutti
Direi di sě...

 Le tendine le ho create in html assegnandogli un id con i css e 
rendendole hidden per default.
<cut>
I menu dropdown magari multilivello non sono bestie facili se vuoi avere 
una buona compatibilità crossbrowser, richiedono molto tempo per 
svilupparli.
A meno che tu non lo stia facendo per ragioni didattiche ti consiglio di 
customizzare uno script già pronto.  
Con il coolmenu4 di Thomas Brattli (il miglior in circolazione IMHO) ho 
rifatto interamente il menu di jsdir e il risultato è abbastanza 
interessante:
http://digilander.libero.it/armageddon99/coolmenu2/coolmenu.htm
recupera tutto dalla cache e vai sul sito 
www.dhtmlcentral.com
 indicato 
nello script per le info.
bye
armaged

<strong>ddd</strong></A></SPAN></TD>
                    </TR>
                    <TR>
                      <TD class=row1><SPAN class=genmed><A class=genmed
href="#" onMouseOver="showMenu('eee');"
onMouseOut="sparisci('eee');"><strong>eee</strong></A></SPAN></TD>
                    </TR>
                    <TR>
                      <TD class=row1><SPAN class=genmed><A class=genmed
href="#"><strong>fff</strong></A></SPAN>
                      </TD>
                    </TR>
                    <TR>
                      <TD class=row1><SPAN class=genmed><A class=genmed
href="index.php?m=parla"><strong>ggg</strong></A></SPAN>
                      </TD>
                    </TR>
                    <TR>
                      <TD class=row1><SPAN class=genmed><A class=genmed
href="index.php?sm=tana"><strong>hhh</strong></A></SPAN>
                      </TD>
                    </TR>
                  </TBODY>
                </TABLE></TD>
              <div id="aaa" onMouseOver="mantieni();"
onMouseOut="sparisci('aaa');">
                Altro<br>
                <br>
                <a href="/index.php?sm=cimitero"
class="genmed">Uhura</a><br>
              </div>
              <div id="bbb" onMouseOver="mantieni();"
onMouseOut="sparisci('bbb');" >
                qualcosa<br>
                <br>
                <a href="#" class="genmed" >carlo</a><br>
                <a href="#" class="genmed">arturo</a><br>
              </div>
              <div id="ccc" onMouseOver="mantieni();"
onMouseOut="sparisci('ccc');">
                Servizi<br>
                <br>
                <a href="#" class="genmed">gino</a><br>
                <a href="#" class="genmed">mario</a><br>
              </div>
              <div id="ddd" onMouseOver="mantieni();"
onMouseOut="sparisci('ddd');">
                Chi Siamo...<br>
                <br>
                <a href="#" class="genmed">acca</a><br>
                <a href="#" class="genmed">emme</a><br>
              </div>
              <div id="eee" onMouseOver="mantieni();"
onMouseOut="sparisci('eee');">
                Prodotti<br>
                <br>
                <a href="#" class="genmed">pippo</a><br>
                <a href="#" class="genmed">peppe</a><br>
              </div>
              <!-- FINE MENU -->
              <TD rowSpan=2 vAlign=top width="2%"><IMG height=1
            src="/images/pixel.gif" width=15></TD>
              <!-- CONTENT-->
              <TD rowSpan=2 vAlign=top width="94%">{CONTENT}</TD>
              <!-- FINE CONTENT -->
            </TR>
            <TR>
              <!-- width="26%" -->
              <TD vAlign=top>&nbsp; </TD>
            </TR>
          </TBODY>
        </TABLE>
        <TABLE border=0 cellPadding=1 cellSpacing=1 class=forumline
        width="100%">
          <TBODY>
            <TR>
              <TD align=middle class=copyright>&nbsp;</TD>
            </TR>
          </TBODY>
        </TABLE>
        <table width="100%" border="0" cellspacing="0" cellpadding="2">
          <tr>
            <td width="200%"> <hr noshade size="5"> </td>
          </tr>
        </table>
      </TD>
    </TR>
  </TBODY>
</TABLE>
</body>
</html>
css.css --
#contenutoPrincipale {
position: relative;
top: 0; left: 0;
width: 100%;
padding: 10px;
background: #FFF;
}
#aaa
{
position: absolute;
display: block;
left: 170px;
top: 190px;
text-decoration: hand;
visibility: hidden;
width: 200;
background-color: white;
border-width: 3;
padding: 20px;
/*BORDER: #369 2px solid;*/
border-top: 3px #336699 solid;
border-right: 1px #369 solid ;
border-bottom: 3px #369 solid;
border-left: 1px solid #369;
}
#bbb
{
position: absolute;
display: block;
left: 170px;
top: 210px;
visibility: hidden;
width: 200;
background-color: white;
border-top: 3px #336699 solid;
border-right: 1px #369 solid ;
border-bottom: 3px #369 solid;
border-left: 1px solid #369;
padding: 20px;
}
#ccc
{
position: absolute;
display: block;
left: 170px;
top: 230px;
visibility: hidden;
width: 200;
background-color: white;
border-top: 3px #336699 solid;
border-right: 1px #369 solid ;
border-bottom: 3px #369 solid;
border-left: 1px solid #369;
padding: 20px;
}
#ddd
{
position: absolute;
display: block;
left: 170px;
top: 250px;
visibility: hidden;
width: 200;
background-color: white;
border-top: 3px #336699 solid;
border-right: 1px #369 solid ;
border-bottom: 3px #369 solid;
border-left: 1px solid #369;
padding: 20px;
}
#eee
{
position: absolute;
display: block;
left: 170px;
top: 273px;
visibility: hidden;
width: 200;
background-color: white;
border-top: 3px #336699 solid;
border-right: 1px #369 solid ;
border-bottom: 3px #369 solid;
border-left: 1px solid #369;
padding: 20px;
}

> Ok, ho cercato di ridurlo al minimo:
Non c'è verso, non riesco a farlo andare... "ricucire" è sempre un pò un
problema! Quello che ho capito però è che non è compatibile con altri
browser che non siano NN e IE, cambiando proprio poco si riuscirebbe ad
estendere la compatibilità!
Mi sembra di riconosce l'impronta di qualche tutorial di 
html.it
,
comunque ci sono 2 cose che proprio non mi piacciono:
(1)
if ((browser == "Netscape") && (browserNum < 5)
lo sostituirei con:
if(document.layers)
....e così per gli altri
(2)
quel modo di prendere il riferimento all'oggetto sarà forse più veloce
ma è veramente brutto! Riadatterei con:
function getRef(id){
 if(document.getElementById)
  return document.getElementById(id);
 if(document.all)
  return document.all[id];
 if(document.layers)
  return document.layers[id];
 return null;
}


Ok, ti ringrazio per le dritte, ma sapresti consigliarmi un menu simile a
questo che ho fatto, ma che funzioni?
Grazie

 Grazie
Prego