-
Alpha_Rosso.
User deleted
Qual è il codice HTML della "tendina" Categorie che avete subito sotto il logo? 
. -
.
Se mi ricordo qualcosa di ciò che è stato fatto tre anni fa o quasi è il risultato dell'insieme di uno script inutile e in questo caso irrilevante per chiudere la tabella, del normale codice di una qualsiasi tabella (in questo caso usando le classi riprende i colori della tabella delle sezioni) e del codice di un semplice elenco a scomparsa.
Il codice del menù a tendina è più o meno lo stesso che trovi qui, ma anziché utilizzarlo come descritto lì lo integri in una tabella usando "ul" con l'id "topnav" all'interno di ogni colonna in cui vuoi inserire la voce che contiene un elenco (chiamiamola Nome Gruppo); prima del nome del gruppo (e se vuoi ci metti anche un link usando semplicemente href, ecc) usi anche "li" e lo lasci aperto, poi, dopo il nome del gruppo, usi "ul" con la classe "hiddennav" e ora inizi il tuo elenco ricordando di aggiungere "li" prima di ogni voce e di chiuderlo dopo ogni voce.
Quando hai terminato il tuo gruppo di voci nascoste dell'elenco chiudi anche "ul" e "li", e se vuoi aggiungere un nuovo elenco nascosto nella stessa colonna semplicemente riapri "li" senza chiudere l'ultimo "ul" e ripeti la procedura sopra riaprendo un nuovo "ul" con classe "hiddennav" con dentro altri "li".
Un esempio pratico è questo:HTML<tr>
<td> <ul id="topnav">
<li>Nome Gruppo <ul class="hiddennav">
<li>Prima Voce Nascosta</li>
<li>Seconda Voce Nascosta</li>
<li>Terza Voce Nascosta</li>
</ul> </li>
<li>Nome Gruppo <ul class="hiddennav">
<li>Prima Voce Nascosta</li>
<li>Seconda Voce Nascosta</li>
<li>Terza Voce Nascosta</li>
<li>Quarta Voce Nascosta</li>
<li>Quinta Voce Nascosta</li>
</ul> </li> </ul>
</td>
<tr>
Se vuoi mettere dei link basta che usi il normale codice HTML applicandolo al nome del gruppo o della voce:HTML<tr>
<td> <ul id="topnav">
<li><a href="LINK" target="_self">Nome Gruppo</a> <ul class="hiddennav">
<li><a href="LINK">Prima Voce Nascosta</a></li>
<li><a href="LINK">Seconda Voce Nascosta</a></li>
<li><a href="LINK">Terza Voce Nascosta</a></li>
</ul> </li>
<li><a href="LINK" target="_self">Nome Gruppo</a> <ul class="hiddennav">
<li><a href="LINK">Prima Voce Nascosta</a></li>
<li><a href="LINK">Seconda Voce Nascosta</a></li>
<li><a href="LINK">Terza Voce Nascosta</a></li>
<li><a href="LINK">Quarta Voce Nascosta</a></li>
<li><a href="LINK">Quinta Voce Nascosta</a></li>
</ul> </li> </ul>
</td>
<tr>
Ricorda di inserire in HTML anche la parte racchiusa nel tag "style" e presente nella discussione che ti ho linkato sopra. Il resto non inserirlo, perché al posto di quell'elenco andrai a mettere le colonne e le righe della tabella unite all'elenco come nell'esempio (ovviamente prima e dopo devi chiudere la tabella e se vuoi la personalizzi dal punto di vista grafico). Puoi fare gli elenchi anche disponendoli nelle righe, anziché nelle colonne, in teoria... Ricorda di chiudere il tuo elenco quando hai finito. Se non hai uno stile preciso in mente per la tua tabella, semplicemente mettila nei tag "table" senza aggiungere altro, invece se desideri personalizzarla dovrai aggiungere manualmente eventuali immagini di sfondo o per la cornice, oppure inserire delle classi o affidarti a un generatore di tabelle se vuoi creare una tabella con la stessa grafica del forum.
Un esempio di tabella finita completa di tutto ciò che viene descritto sopra è questo:SPOILER (clicca per visualizzare)HTML<style>
#topnav {list-style:none; padding: 0; height:auto; background:none}
#topnav li {float:down; display:block; padding:none}
#topnav li a {font-size: 9.5pt; padding:none; color:none}
#topnav li a:hover, #topnav li:hover a {color: #EEE; background: #999}
.hiddennav {color: #333; z-index: 1; position:absolute; left: -1000em; text-align:left; padding: 5px 0; background: #999}
#topnav li:hover .hiddennav {left:auto; top:auto}
#topnav li .hiddennav li {clear:both; list-style:none; padding: 0; margin: 0}
#topnav li:hover .hiddennav a:link, #topnav li:hover .hiddennav a:visited {background:transparent; color: #CCC}
#topnav li:hover .hiddennav a:hover {color:none; background:transparent; text-decoration:underline}</style>
<table>
<tr>
<td> <ul id="topnav">
<li>Nome Gruppo <ul class="hiddennav">
<li>Prima Voce Nascosta</li>
<li>Seconda Voce Nascosta</li>
<li>Terza Voce Nascosta</li>
</ul> </li>
<li>Nome Gruppo <ul class="hiddennav">
<li>Prima Voce Nascosta</li>
<li>Seconda Voce Nascosta</li>
<li>Terza Voce Nascosta</li>
<li>Quarta Voce Nascosta</li>
<li>Quinta Voce Nascosta</li>
</ul> </li> </ul>
</td>
<tr>
</table>
Spero si sia compreso qualcosa, ho cercato di semplificare al massimo riducendo la spiegazione alle modifiche essenziali da fare. Se vuoi aggiungere anche il tasto per chiudere la tabelle ti metto anche le istruzioni per farlo e lo script da inserire (è uno script dell'FFMagazine, se non erro)..
Codice HTML tendina categorie |
Web