cara buat menu docking cantik jquery

Dalam Tips dan Trik Blog akan dibahas tentang Menu Docking adalah menu tiga dimensi yang sepenuhnya digerakan  jquery, Menu Docking tersebut banyak digunakan di website - website profesional tidak terkecuali Blogspot. Nah Bagaimana Cara Buat Menu Docking Cantik Jquery ingin tau liat hasilnya kita lihat dulu demonya  Di Blog Ini  Kemudian Login ke blog anda tapi Sebelumnya liat terlebih dahulu macam macam menu yang disajikan Blog ini ada menu vertical jquery juga ada menu navigasi slide jquery ada lagi tentang cara membuat menu horizontal navigasi dan yang terakhir tentang cara membuat menu navigasi jquery

@ 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 �&#65533;��&#65533;£ 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>

• Simpan Gadget Dan Semoga Berhasil mudah mudahan Blog Anda Menjadi Profesional seperti Blog ini
HTC DCC
• Baca Juga Artikel Tentang cara membuat menu vetical jquery
Saran Dan Kritik Anda Sangat Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Blog Ini..