Avevo già a mente di postare un esempio di realizzazione basato su questa proprietà di stile gestita da javascript.
Permette di far apparire/scomparire singoli Elementi od interi blocchi di contenuto, generalmente racchiusi all' interno di un DIV; DIV che JS deve poter trovare e per questo nel nostro esempio, abbiamo conferito uno specifico distinto ID a ciascun DIV.
Attenzione a (non) usare NAME poiché non tutti i Browser lo ammettono con l' Elemento DIV.
Lasciando momentaneamente stare l' impiego di immagini nella realizzazione della pulsanteria, ti posto un menù+sottomenù fatto di TABLE e caratteri di testo.
L' apertura dei sottomenù richiede il click, onMouseOver ed onMouseOut agiscono solo per la colorazione/evidenziazione; estendere queste azioni anche all' apertura/chiusura dei sottomenù complica leggermente lo schema, e vedremo in seguito.
La TABLE vera e propria del menù è a sua volta contenuta entro una prima TABLE che con TD BGCOLOR="" conferisce un colore di sfondo al proprio contenuto, appunto.
Si potrebbe fare direttamente TABLE BGCOLOR="" come in passato, funziona sempre, ma ufficialmente era poi stato deprecato (un paio d' anni fa +/-).
Con questo esempio vedi come è possibile creare una classe di stile anche per i Link, per l' Elemento A quindi.codice:<html> <head><title>display sub-list</title> <script type="text/javascript"> function subMenu(which) { //alert(''); if (document.getElementById(which).style.display=="none"){ document.getElementById(which).style.display="block"; } else { document.getElementById(which).style.display="none"; } } </script> <style type="text/css"> .menùLink { color: #EFEFEF; text-decoration: none; } </style> </head> <body bgcolor="#909090"> <div align="center" style="border: 1px dashed yellow;"> <table border="0" cellpadding="0" cellspacing="0"><tr> <td bgcolor="#444440"> <table border="0" cellpadding="6" cellspacing="0"><tr> <td> </td> </tr><tr> <td onmouseout='this.style.backgroundColor="#444440";' onmouseover='this.style.backgroundColor="#D06060";'>collegamento 1 &#160; &#160; &#160; </td> </tr><tr> <td> <div id="sub1" style="display: none;"> <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr> <td onmouseout='this.style.backgroundColor="#444440";' onmouseover='this.style.backgroundColor="#D06060";'>&#160; &#160; collegamento A</td> </tr><tr> <td onmouseout='this.style.backgroundColor="#444440";' onmouseover='this.style.backgroundColor="#D06060";'>&#160; &#160; collegamento B</td></tr> </table> </div> </td> </tr><tr> <td onmouseout='this.style.backgroundColor="#444440";' onmouseover='this.style.backgroundColor="#D06060";'>collegamento 2 &#160; &#160; &#160; </td> </tr><tr> <td> <div id="sub2" style="display: none;"> <table border="0" cellpadding="0" cellspacing="0"><tr> <td onmouseout='this.style.backgroundColor="#444440";' onmouseover='this.style.backgroundColor="#D06060";'>&#160; &#160; collegamento C</td> </tr><tr> <td onmouseout='this.style.backgroundColor="#444440";' onmouseover='this.style.backgroundColor="#D06060";'>&#160; &#160; collegamento D</td></tr> </table> </div> </td></tr> </table> </td></tr> </table> </div> <a href="http://www.html.it/" target="_blank">Esempio LINK COMUNE - Lo STYLE CLASS="menùLink" conferito ai Link del menù a tendina, rimane esclusivo di questi.</a> </body> </html>
Forse sarebbe meglio evitare l' uso della ù accentata in class="menùLink" non si sa mai la reazione imprevista di qualche Browser.
L' indentazione è stata ottenuta con l' aggiunta di caratteri di spazio vuoto &#160; o &nbsp;
<small> potrebbe starci bene per ridurre il carattere nei sottomenù.
Gioca sui Valori nei cellpadding="6" per vedere come può cambiare l' aspetto, le spaziature.
P.S: Ti ricordo che devi ricomporre class="menùLink" href="java-script: subMenu('sub1');" togliendo il trattino - che il sistema del Forum aggiunge.

Rispondi quotando