Cara Membuat Menu dengan Dock

Written by RA_Syihan on Friday, November 12, 2010 | Category: Networking, Trick, Tutorial

Menu Docking adalah menu tiga dimensi yang sepenuhnya digerakan jquery, Menu Docking tersebut banyak digunakan di website - website profesional tidak terkecuali blogspot.

Menu Docking diatas bahkan terdapat pula pada software-nya untuk bisa digunakan di PC / komputer anda. (link software doc pada postingan selanjutnya)

Jika anda ingin Membuat Menu Docking dengan jquery ini ke blogspot anda, sebelumnya anda bisa lihat dulu demonya disini

@ Kemudian Login ke blog anda
@ Pilih tata letak
@ Elemen halaman
@ Tambah gadget "JavaScript"
@ Masukan jquery dibawah beserta stylenya:

<script type="text/javascript" src="http://dinhquanghuy.110mb.com/jquery1.js"></script>
<script type="text/javascript" src="http://dinhquanghuy.110mb.com/interface.js"></script>

<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 90,
proximity: 90,
halign : 'center'
}
)
}
);

</script>

<style type="text/css">
.dock {
position: relative;
height: 50px;
padding-left:0px;
margin-top:0px;

}
.dock-container {
position: absolute;
height: 50px;
padding-left: 20px;

}
a.dock-item {
display: block;
width: 60px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: 14px Arial, Helvetica, sans-serif;
}

.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}

.dock-item span {
display: block;
padding-left: 20px;
}
</style>

<div style="display: block;" class="dock" id="dock">
<div style="left: -7.48972px; width: 814.979px;" class="dock-container">

<a style="width: 90px; left: 0px;" class="dock-item" href="link 1"><img src="http://i342.photobucket.com/albums/o433/bkprobk/home.png" alt="home"><span style="display:block;">Home page</span></a>

<a style="width: 90px; left: 90px;" class="dock-item" href="link 2"><img src="http://i342.photobucket.com/albums/o433/bkprobk/about.png" alt="GiÃ�Â¡Ã�Â»Ã¯Â¿Â½i thiÃ�Â¡Ã�Â»Ã¯Â¿Â½u"><span style="display:block;">Introduce</span></a>

<a style="width: 90px; left: 180px;" class="dock-item" href="link 3"><img src="http://i342.photobucket.com/albums/o433/bkprobk/dichvu.png" alt="DÃ�Â¡Ã�Â»Ã¯Â¿Â½ch vÃ�Â¡Ã�Â»Ã�Â¥"><span>Service</span></a>

<a style="width: 90px; left: 270px;" class="dock-item" href="link 4"><img
src="http://i342.photobucket.com/albums/o433/bkprobk/sanpham.png" alt="Site Ã�ï¿½Ã¯Â¿Â½Ã�ï¿½Ã�Â£ thiÃ�Â¡Ã�ÂºÃ�Â¿t kÃ�Â¡Ã�ÂºÃ�Â¿">Customer</a>

<a style="width: 90px; left: 360px;" class="dock-item" href="link 5"><img
src="http://i342.photobucket.com/albums/o433/bkprobk/template.png" alt="Template"><span style="display: block;">Template</span></a>

<a style="width: 90px; left: 450px;" class="dock-item" href="link 6"><img
src="http://i342.photobucket.com/albums/o433/bkprobk/history.png" alt="history"><span style="display:block;">Advisor</span></a>

<a style="width: 134.979px; left: 540px;" class="dock-item" href="link 7"><img
src="http://i342.photobucket.com/albums/o433/bkprobk/doitac.png" alt="calendar"><span style="display:block;">Partners</span></a>

<a style="width: 140px; left: 674.979px;" class="dock-item" href="link 8"><img
src="http://i342.photobucket.com/albums/o433/bkprobk/email.png" alt="rss"><span style="display:block;">Contact</span></a>

</div>
</div>