Con il codice presentato in questa guida potete creare ed inserire nel vostro forum/blog un dock menů, facilmente e senza dover utilizzare javascripts o iframes a pagine HTML esterne al forum.
La versione javascript la trovate in
questa guida.
L'installazione del menů č semplicissima e si compone di due fasi:
PRIMA FASECopiate e incollate, in Amministrazione → Grafica →
Colori e stili (in qualsiasi punto, per comoditŕ di utilizzo suggeriamo di inserirlo in fondo, sotto i codici della skin), questo codice:
CODICE
/* Css dock-menu 2.0 */
.nb_dock {list-style-type: none; margin: 0; padding: 0; margin-bottom: 30px}
.nb_dock * {transition: all 1s ease; -webkit-transition: all 1s ease}
.nb_dock li {display: inline-block}
.nb_dock li img {width: 60px}
.nb_dock li div {background: #000; color: #FFF; opacity: 0}
.nb_dock li:hover {padding: 0 20px}
.nb_dock li:hover img {transform: scale(1.8); -ms-transform: scale(1.8); -webkit-transform: scale(1.8)}
.nb_dock li:hover + li img {transform: scale(1.4); -ms-transform: scale(1.4); -webkit-transform: scale(1.4)}
.nb_dock li:hover + li {padding: 0 10px}
.nb_dock li:hover div {opacity: 1}
In Amministrazione → Grafica →
Codice HTML, dove volete che compaia il menů, inserite quest'altro codice (che costituisce la struttura HTML del menů):
HTML
<ul class="nb_dock">
<li><a href="LINK"><img alt="" src="IMG"></a><div>TESTO</div></li>
<li><a href="LINK"><img alt="" src="IMG"></a><div>TESTO</div></li>
<li><a href="LINK"><img alt="" src="IMG"></a><div>TESTO</div></li>
</ul>
Al posto di
LINK va inserito il link che della pagina web che desiderate linkare, al posto di
IMG il link dell'immagine che sarŕ visualizzata (per quel link), e al posto di
TESTO, un piccolo testo descrittivo a vostro piacere.
CODICE DI ESEMPIO
HTML
<ul class="nb_dock">
<li><a href="http://newsboard.forumfree.it/?f=2320877"><img alt="" src="http://i.imgur.com/0YHi8C5.png"></a><div>NewsBoard Script</div></li>
<li><a href="http://newsboard.forumfree.it/"><img alt="" src="http://i.imgur.com/E4hot0N.png"></a><div>NewsBoard Forum</div></li>
<li><a href="http://newsboard.forumfree.it/rss.php?c=121718"><img alt="" src="http://i.imgur.com/90daP90.png"></a><div>NewsBoard RSS</div></li>
</ul>
Potete vedere questo codice funzionante in
QUESTA PAGINA.
Aggiungere/rimuovere elementiČ possibile aggiungere altre immagini dal dock-menu; per farlo č necessario aggiungere un'altra riga nel formato che segue:
HTML
<li><a href="LINK"><img src="IMG"></a><div>Home</div></li>
al codice inserito nel box
Codice HTML, sopra o sotto un altro degli elementi
li.
Modifiche graficheEssendo il codice CSS di non facile utilizzo, sconsigliamo (per chi non ha le conoscenze adatte) di modificarlo.
Se servono delle modifiche al codice č consigliabile usare la sezione
Supporto Script del NewsBoard Forum.
L'unica modifica che da fare č quella legata al testo delle varie immagini (quello su sfondo nero che compare al passaggio col mouse sull'immagine), modifica che si puň fare da questa riga
(non modificando il valore opacity):
CODICE
.nb_dock li div {background: #000; color: #FFF; opacity: 0}
Per richieste di modifica del codice e/o aiuto generico usate la sezione
Supporto Script.
