disign.it | Jquery menu stile OS X | a digital sign for a best design!
A digital sign for a best design
Javascript 2.281 visualizzazioni

Jquery menu stile OS X

06/07/2011

La potenza della libreria Javascript Jquery abbatte barriere impensabili, e così anche io, che non posso certo esser definito un fanatico del mondo Apple, ho ceduto alla tentazione di fronte alla semplicissima realizzazione di un menù stile dock di OS X.
La libreria in questione la trovate qui, ed è veramente semplice da implementare.
Nel mio caso (sul sito Impronte digitali) ho inserito il menù di tipo orizzontale.
Occorre prima di tutto realizzare le immagini (attenzione a farle tutte della stessa larghezza altrimenti il ridimensionamento produrrà effetti indesiderati), poi inseriamo nell'head del documento gli embed dei js e del css

script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"  /script

script type="text/javascript" src="js/fisheye-iutil.min.js"  /script

script type="text/javascript" src="js/dock.js" /script

link rel="stylesheet" type="text/css" media="screen" href="css/dock.css"

Non resta che inserire nel div del menù il codice html

div id="dock"
           
div class="dock-container"

a class="dock-item" href="#" img src="dock/nsw.png" alt=""  /a

a class="dock-item" href="#" img src="dock/ths.png" alt=""  /a>

/div

/div

Naturalmente sul sito potete scaricare anche gli altri esempi e leggere tutorial sull'uso più approfonditi.

← La Second Life degli esperti Leggere e linkare il contenuto di una directory →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.