-
.
Premessa:
In forumfree ci sono diversi tipi di menù, quelli a lato a scomparsa, quelli sotto o sopra il logo.
Oggi vi spiegherò come creare una barra degli strumenti in stile Windows 7 da utilizzare come menù nei Vostri forum, e anche nei siti web.
Spiegazioni:
Come vedremo poco più avanti, per far funzionare correttamente questo tipo di menù, bisogna tenere conto di 3 elementi fondamentali per la buona riuscita del risultato. Sono:
Il menù andrà inserito dentro al div, dove poi potremmo dargli specifiche varie, come la posizione, la larghezza, la visibilità, ecc...CODICE<div style.....></div>
Poi c'è questa opzione che servirà a dare il comando per cambiare l'immagine quando il mouse passa sopra a un menù specificoCODICEonmouseover="this.src='IMMAGINE'"
Infine quando il mouse passa altrove, l'immagine ritorna come in precedenzaCODICEonmouseout="this.src='IMMAGINE'"
Codice:
Tanto per non farla lunga, ho creato un codice già pronto all'uso (per un ipotetico forum di Windows 8), da personalizzare come si vuoleSPOILER (click to view)CODICE<!--BARRA VELOCE-->
<div style="position:fixed; left:15%; width: 70%; bottom:0px; overflow:visible;"><a href="http://HOME PAGE"><img src="http://i47.tinypic.com/728wle.jpg" alt="" onmouseover="this.src='http://i46.tinypic.com/2j2yfwk.jpg'" onmouseout="this.src='http://i47.tinypic.com/728wle.jpg'"></a><a href="http://LINK"><img src="http://i47.tinypic.com/a5ksa9.jpg" alt="" onmouseover="this.src='http://i49.tinypic.com/r2s1vc.jpg'" onmouseout="this.src='http://i47.tinypic.com/a5ksa9.jpg'"></a><a href="?act=Reg&CODE=00"><img src="http://i50.tinypic.com/kb6802.jpg" alt="" onmouseover="this.src='http://i48.tinypic.com/2isibu0.jpg'" onmouseout="this.src='http://i50.tinypic.com/kb6802.jpg'"></a><a href="?act=Search&CODE=getactive"><img src="http://i48.tinypic.com/ndorc9.jpg" alt="" onmouseover="this.src='http://i45.tinypic.com/30t76dv.jpg'" onmouseout="this.src='http://i48.tinypic.com/ndorc9.jpg'"></a><a href="http://LINK"><img src="http://i45.tinypic.com/2wqafmd.jpg" alt="" onmouseover="this.src='http://i45.tinypic.com/2ai51n8.jpg'" onmouseout="this.src='http://i45.tinypic.com/2wqafmd.jpg'"></a><a href="http://LINK"><img src="http://i47.tinypic.com/6qia2w.jpg" alt="" onmouseover="this.src='http://i45.tinypic.com/2e31t0y.jpg'" onmouseout="this.src='http://i47.tinypic.com/6qia2w.jpg'"></a><a href="http://LINK"><img src="http://i50.tinypic.com/2i2a1qb.jpg" alt="" onmouseover="this.src='http://i45.tinypic.com/jsok92.jpg'" onmouseout="this.src='http://i50.tinypic.com/2i2a1qb.jpg'"></a><a href="http://LINK"><img src="http://i50.tinypic.com/10druvn.jpg" alt="" onmouseover="this.src='http://i48.tinypic.com/cj1as.jpg'" onmouseout="this.src='http://i50.tinypic.com/10druvn.jpg'"></a><img src="http://i50.tinypic.com/1ieaa0.jpg"></a></div>
Andranno cambiati i vari link, e nel caso anche i valori
position:fixed = Per mantenere la barra fissa sullo schermo senza che scrolli insieme alla pagina.
left:15% = Distanza in % (o in Pixel, basta sostituire "%" con "px") dalla parte sinistra dello schermo (personalizzare per centare la barra degli strumenti alla pagina)
width: 70% = Larghezza del DIV (anche qui personalizzabile con "px"), aumentare o diminuire in base alla larghezza totale della barra degli strumenti (un valore troppo basso la dividerà su 2 o più righe)
bottom:0px; = Distanza dal bordo inferiore della finestra (più è alto il valore e più la bara degli strumenti si sposterà in alto)
In parole povere un singolo menù è composto da:CODICE<a href="http://HOME PAGE"><img src="http://i47.tinypic.com/728wle.jpg" alt="" onmouseover="this.src='http://i46.tinypic.com/2j2yfwk.jpg'" onmouseout="this.src='http://i47.tinypic.com/728wle.jpg'"></a>
In ordine così:
Link alla pagina web, immagine standard del menù, immagine che cambia al passaggio del mouse, immagine standard
Più menù singoli vanno inseriti senza andare a capo, ma con continuità e senza spazi, altrimenti la barra non diventerà più tutta orizzontale, ma sarà a colonna.
Per avere un immagine fissa (come la fine della barra basterà inserire il codice immagine:CODICE<img src="LINK ALL'IMMAGINE">(IMG:http://i47.tinypic.com/2rzx7w6.jpg)
Il Codice va inserito nel riquadro HTML denominato "in fondo a tutte le pagine"
.
[Tutorial] Barra strumenti in stile Windows 7 |
Web