Creare un dock menu in stile Mac OS con jQuery

Di menù per siti web nello stile del Mac OS Dock ne esistono diversi, non solo jQuery ma anche Flash. Tuttavia quello che vi presento oggi rappresenta una buona sintesi tra semplicità d’uso e buon impatto grafico, nonostante sia in giro già da un pezzo. Creiamo una pagina index e incolliamo il seguente html:

CSS Dock Menu



















N.Design

Designer Wall

Design Jobs

Best Web Gallery

IconDock

Stock Icons











Homespan>src="http://www.iwebdesigner.it/web-design/creare-un-dock-menu-in-stile-mac-os-con-jquery/images/music.png" alt="music" />

Videospan>n>

Links

RSS

RSS2

In questo caso abbiamo due menù, uno nella parte superiore dello schermo e uno nella parte inferiore. Le immagini caricate nel <div> container possono essere ovviamente sostituite con icone di vostra scelta, e si trovano all’interno della cartella images nella main directory del sito che trovate in download alla fine dell’articolo. Creiamo ora un foglio di stile chiamiato “style” e incolliamoci dentro il seguente Css:

body {
font: 11px Arial, Helvetica, sans-serif;

background: #ffffff url(images/main-bg.gif);

padding: 0;

margin: 0;

}

a, a:visited {

outline: none

}

img {

border: none;

}

/* dock - top */

.dock {

position: relative;

height: 50px;

text-align: center;

}

.dock-container {

position: absolute;

height: 50px;

background: url(images/dock-bg2.gif);

padding-left: 20px;

}

a.dock-item {

display: block;

width: 40px;

color: #000;

position: absolute;

top: 0px;

text-align: center;

text-decoration: none;

font: bold 12px Arial, Helvetica, sans-serif;

}

.dock-item img {

border: none;

margin: 5px 10px 0px;

width: 100%;

}

.dock-item span {

display: none;

padding-left: 20px;

}

/* dock2 - bottom */

#dock2 {

width: 100%;

bottom: 0px;

position: absolute;

left: 0px;

}

.dock-container2 {

position: absolute;

height: 50px;

background: url(images/dock-bg.gif);

padding-left: 20px;

}

a.dock-item2 {

display: block;

font: bold 12px Arial, Helvetica, sans-serif;

width: 40px;

color: #000;

bottom: 0px;

position: absolute;

text-align: center;

text-decoration: none;

}

.dock-item2 span {

display: none;

padding-left: 20px;

}

.dock-item2 img {

border: none;

margin: 5px 10px 0px;

width: 100%;

}

Una volta creata la cartella js, copiate all’interno i seguenti files javascript:

jquery.js

interface.js

Il dock menù ora è pronto. I collegamenti dei link sono vuoti, non resta che riempirli con l’Url delle vostre pagine. Il Css è facilmente addomesticabile e potrete creare le pagine come più vi compiace, semplicemente intervenendo sul foglio di stile, o sostituendo le gif di background nella cartella images.

Se siete interessati ad approfondire la conoscenza sulle varietà di menù dock style, ecco una serie di link che potrebbero fare al caso vostro:

pure css3 icon dock

jqDock

css dock menu

create a apple style dock bar with jquery using the resize on approach plugin 

358 jquery

In download nel pacchetto .zip trovate tutte le risorse.

Alla prossima!