Cara Membuat Menu Docking Jquery

Cara Membuat Menu Docking Jquery. Menu Docking adalah menu 3 dimensi yang menggunakan fasilitas jquery. menu docking ini tambah menarik karena dilengkapi icon sesuai dengan menu tersebut. contohnya Home maka icon yang cocok gambar rumah. Menu Docking juga ada softwarenya untuk bisa digunakan di komputer sobat. Jika sobat ingin Membuat Menu Docking dengan jquery ini ke blogspot sobat, 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>
  • selanjutnya tinggal disimpan
Dapatkan update artikel terbaru kami langsung ke email anda

No Responses to "Cara Membuat Menu Docking Jquery"

Post a Comment

pasang iklan murah