La barra Mac è proprio bella, nel mio precedente tutorial abbiamo visto come “emularla” su Windows, e se volessimo inserirla nel nostro sito web?? Scopriamo Come

Questo menu molto carino è creato in Java script ed è scaricabile da qui http://javascript.html.it/script/vedi/4346/menu-stile-dock/

Potete vedere sia il demo cliccando appunto su “Vedi il Demo” o scaricare lo script.

Vediamo ora come modificare le icone e inserire i link

Per prima cosa estraiamo tutto il contenuto dell’archivio in una cartella in questo caso “Archive”, troverete all’interno i seguenti file:


Apriamo il file “Esempio” cliccando con il tasto destro e scegliendo “Apri Con” e selezionando il Blocco Note. A questo punto ci ritroveremo di fronte al codice della pagina html, dobbiamo modificare la seconda riga, scorriamo fin quando non troviamo: <a class=”dock-item2″ href=”#”><span>Home</span> dopo Span ci accorgiamo che l’oggetto fa riferimento alla pagina Home, quindi inseriamo l’indirizzo dopo “href=” al posto del “#” così:

<a class=”dock-item2″ href=”http://lucavolino.wordpress.com/”><span>Home</span>

Ora l’icona Home sulla barra ci porterà alla pagina Home del nostro sito, ma se noi volessimo cambiare anche le icone?? Semplice basta scaricare un immagine e ridemensionarla con le stesse dimensioni delle icone presenti sulla barra (in questo caso 128×128) salvarla con lo stesso formato (in questo caso .png) e andarla a sostituire nella cartella “images”

Apriamo ora Esempio.html e avremo la nostra barra cambiata e con il link funzionante

Ripetiamo il tutto con le altre icone e avremo la nostra barra personalizzata

Enjoy

Numero di Visite: 934