Tạo menu dock (dạng 2) cực khủng!

Tạo menu dock (dạng 2) cực khủng!10/03/10, 08:20 am

Xem demo ở đây : [You must be registered and logged in to see this link.]

Hình ảnh minh họa:

Chèn đoạn code bên dưới vào head:

Code:

<script type="text/javascript" src="http://winni.110mb.com/Js-File/jquery.js"></script>
<script type="text/javascript" src="http://winni.110mb.com/Js-File/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>

Tạo 1 widget HTML/Javascript và dán code bên dưới vào:

Code:

<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="link anh 1" alt="home"><span style="display:block;">Trang Chủ</span></a>

<a style="width: 90px; left: 90px;" class="dock-item" href="link 2"><img src="link anh 2" alt="Giới thiệu"><span style="display:block;">Giới Thiệu</span></a>

<a style="width: 90px; left: 180px;" class="dock-item" href="link 3"><img src="link anh 3" alt="Dịch vụ"><span>Dịch vụ</span></a>

<a style="width: 90px; left: 270px;" class="dock-item" href="link 4"><img
src="link anh 4" alt="Site đã thiết kế">Khách Hàng</a>

<a style="width: 90px; left: 360px;" class="dock-item" href="link 5"><img
src="link anh 5" alt="Template"><span style="display: block;">Template</span></a>

<a style="width: 90px; left: 450px;" class="dock-item" href="link 6"><img
src="link anh 6" alt="history"><span style="display:block;">Tư Vấn</span></a>

<a style="width: 134.979px; left: 540px;" class="dock-item" href="link 7"><img
src="link anh 7" alt="calendar"><span style="display:block;">Đối Tác</span></a>

<a style="width: 140px; left: 674.979px;" class="dock-item" href="link 8"><img
src="link anh 8" alt="rss"><span style="display:block;">Liên Hệ</span></a>

</div>
</div>

Các bạn thay "link anh " thành các hình mà bạn muốn.
Chú y: VUI LÒNG DOWN 2 FILE .JS VỀ VÀ UP LÊN HOST RIÊNG CỦA BẠN ĐỂ TRÁNH TRƯỜNG HỢP HẾT bandwidth