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:
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!