Membuat Navbar Menu Dock Style jQuery

Alow sob.. saya posting lagi, hihihihihi . Sebelumnya Minal aidzin yah bro, sist . Lanjut..
Sekarang saya akan share cara buat dock menu sob . Udah tau kan dimana dock menu ? Yang biasa dipake pada pc kita . Sekarang coba terapkan pada blog . Untuk contoh / demonya disini..

Demo

Gimana ? udah tau kan ? itu, menu dock yg di bagian atas blog . mau ?

langsung ajah cara buat nya sob .

1. Masukin nih css sob .
/* dock - top */
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(http://i37.tinypic.com/2epo6bm.jpg);
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;
}


NB:

Gambar ini bisa diupload sendiri .

2. Masukan javascript ini .
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://granoblog.googlecode.com/files/interface.js' type='text/javascript'/>

Nb:

--Sekali lagi saya ingatkan, sebaiknya http://granoblog.googlecode.com/files/interface.js dihostingkan sendiri di tempat hostingan sobat yg lebih terpercaya .
--Dan untuk script jquery/1.3.2 jika sudah ada sebaiknya dibiarkan saja biar ga dobel .

3 ini javascriptnya, masukin tepat dibawah script di atas,

<script type='text/javascript'>

$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);

</script>

4. Terakhir pemanggilannya sob, letakan dibagian body yak, atau di widget juga boleh .

<div class='dock' id='dock'>
<div class='dock-container'>
<a class='dock-item' href='#'><img alt='home' src='http://i38.tinypic.com/34y41hg.jpg'/><span>Home</span></a>
<a class='dock-item' href='#'><img alt='contact' src='http://i37.tinypic.com/2hpn4b8.jpg'/><span>Contact</span></a>
<a class='dock-item' href='#'><img alt='Link Exchange' src='http://i37.tinypic.com/29pdt35.jpg'/><span>Link Exchange</span></a>
<a class='dock-item' href='#'><img alt='portfolio' src='http://i34.tinypic.com/29e4ztd.jpg'/><span>Daftar Isi</span></a>
<a class='dock-item' href='#'><img alt='rss' src='http://i34.tinypic.com/346tagy.jpg'/><span>Rss</span></a>
</div>
</div>

Nb:











Gambar2 diatas bs di hosting sendiri atau bs juga diganting semaunya.. kalo mau yg praktis ? yah sok pake ajah atuh sob...

Selesai deh.. gampang kan ?? trik gampang hasilnya memuaskan..
seperti prinsip bang jquery, write less do more..