Menu dock bagi penggembar Mac tentu sudah tidak asing lagi. Selain tampilan yang keren abis, menu dock juga sangat simpel dan mudah untuk digunakan.
Kali ini, kita akan memmbuat navigasi menu dock ala Mac OS X menggunakan jQuery dengan jqDock plugin.
Langkah-langkahnya adalah sebagai berikut:
1. Buat susunan direktori project Menu Dock seperti di bawah ini:
- Folder icon
- Index.Html
- Jquery.jqDock.min.js
- jquery-1.4.min.js
- style.css
2. Copy semua file image yang disertakan di menu download di bawah.
3. Buat sebuah file css dan beri nama style.css.
4. Buat sebuah file html dan beri nama index.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<link rel="stylesheet" href="style.css">
<script type="text/javascript"
src="jquery-1.4.min.js"></script>
<script type="text/javascript"
src="jquery.jqDock.min.js"></script>
<title>Menu Dock</title>
</head>
5. Kita akan buat 10 buah menu. Ketik kode berikut di antara tag
<body></body>
<body>
<ul id="menu">
<a href="#"><img src="icon/home.png" title="home"
/></a>
<a href="#"><img src="icon/gallery.png" title="gallery"
/></a>
<a href="#"><img src="icon/email.png" title="contact"
/></a>
<a href="#"><img src="icon/portfolio.png" title="portfolio"
/></a>
<a href="#"><img src="icon/music.png" title="music"
/></a>
<a href="#"><img src="icon/video.png" title="video"
/></a>
<a href="#"><img src="icon/history.png" title="history"
/></a>
<a href="#"><img src="icon/calendar.png" title="calendar"
/></a>
<a href="#"><img src="icon/link.png" title="links"
/></a>
<a href="#"><img src="icon/rss.png" title="rss"
/></a>
</ul>
</body>
6. Tambahkan kode jquery berikut ini di antara tag <head>
</head> untuk mebuat efek menu ala Mac OS X
<script type="text/javascript">
$(function(){
$('#menu').jqDock({
align : 'middle',
duration : 200,
labels : 'tr',
size : 48,
distance :
85
fadeIn : 2000});
});
</script>
Keterangan Kode
Untuk membuat menu dock dengan jQuery jqDock plugin, method yang digunakan
adalah method jqDock(). Ada beberapa paramaeter penting yang harus
diperhatikan untuk bisa membangkitkan efek ini. Parameter size merupakan
ukuran image menu saat keadaan normal. yaitu 48. Parameter duration mengatur
kecepatan animasi efek. Makin kecil nilainya, makin cepat.
Parameter duration 200 menyatakan kecepatan animasi 200 milidetik. Parameter
label='tr' (top-right) berarti title menu akan menampilkan di bagian atas
sebelah kanan menu ketika kursor berada di atas menu.
Salah satu yhang terpenting lagi karena kita akan membuat menu horizontal,
kita harus mengatur parameter align dengan salah satu nilai berikut: top,
middle, atau bottom.
Dokumentasi jqDock plugin selengkapnya bisa dilihat di
sini
Comments
Post a Comment