Questa guida, spiega come creare facilmente un menù a tendina come quello di ForumFree, sia utilizzando le classi già utilizzate da ForumFree (il menù avrà quindi lo stesso stile di quello del forum in cui è utilizzato) e sia creandolo da zero (in questo caso andrà personalizzato).
Versione con classi già esistenti
In
Amministrazione -> Grafica -> Codice HTML inserite, dove volete che venga visualizzato il menù a tendina
HTML
<div class="menuwrap menu_tbl">
<ul>
<!-- INIZIO VOCI -->
<!-- VOCE 1 -->
<li class="menu">
<a>Voce1</a>
<ul>
<li>AAA</li>
<li>AAA</li>
<li>AAA</li>
<li>AAA</li>
</ul></li>
<!-- VOCE 2 -->
<li class="menu">
<a>Voce2</a>
<ul>
<li>BBB</li>
<li>BBB</li>
<li>BBB</li>
<li>BBB</li>
</ul></li>
<!-- FINE VOCI -->
</ul>
</div>
Per aggiungere altre voci ti basterà aggiungere un altro pezzo di codice come quello sotto i commenti
<!-- VOCE * -->HTML
<!-- VOCE * -->
<li class="menu">
<a>Voce*</a>
<ul>
<li>NNN</li>
<li>NNN</li>
<li>NNN</li>
<li>NNN</li>
</ul></li>
Per aggiungere invece altre voci al menù a tendina, basterà aggiungere un
Per modificare graficamente invece basterà modificare
.menu_tbl. Quando infatti si vanno a modificare i vari elementi del menù basterà aggiungere
.menu_tbl, prima dell'elemento da modificare, ad esempio
.menu_tbl .menu.
Versione con classi nuove
In
Amministrazione -> Grafica -> Codice HTML inserite, dove volete che venga visualizzato il menù a tendina
HTML
<div class="menu_alternativo">
<ul>
<!-- VOCE 1 -->
<li class="a_menu">
<a>Voce1</a>
<ul>
<li>AAA</li>
<li>AAA</li>
<li>AAA</li>
<li>AAA</li>
</ul></li>
<!-- VOCE 2 -->
<li class="a_menu">
<a>Voce2</a>
<ul>
<li>BBB</li>
<li>BBB</li>
<li>BBB</li>
<li>BBB</li>
</ul></li>
</ul></div>
In
Amministrazione -> Grafica -> Colori e stili inserite
CODICE
.menu_alternativo ul {list-style-type: none; margin: 0; padding: 0; text-align: left}
.menu_alternativo li {display: inline-block; vertical-align: middle; margin: 0; padding: 0}
.a_menu ul {display: none; position: absolute; z-index: 100}
.menu_alternativo li:hover > ul {display: block}
.a_menu li {display: block !important}
Questa parte di codice non va assolutamente rimossa o modificata.
Per aggiungere altre voci ti basterà aggiungere un altro pezzo di codice come quello sotto i commenti
<!-- VOCE * -->HTML
<!-- VOCE * -->
<li class="menu">
<a>Voce*</a>
<ul>
<li>NNN</li>
<li>NNN</li>
<li>NNN</li>
<li>NNN</li>
</ul></li>
Per aggiungere invece altre voci al menù a tendina, basterà aggiungere un
Per personalizzare la grafica, vanno modificati
.menu_alternativo e
.a_menu.
Edited by Kakashi - 4/5/2014, 18:20
