Bagi penggemar Mac yang selalu dimanja dengan tampilan grafis yang menarik, pasti tidak asing dengan tampilan navigasi menu dock seperti ini
Kali ini, kita akan membuat navigasi menu dock ala Mac OS X semacam itu menggunakan jQuery dengan jqDock plugin.
Kali ini, kita akan membuat navigasi menu dock ala Mac OS X semacam itu menggunakan jQuery dengan jqDock plugin.
HORIZONTAL MENU
1. Buat susunan direktori project Menu Dock seperti ini :
- Folder icon
- Index.html
- Jquery-1.4.min.js
- Jquery.jqDock.min.js
- Style.css
2. Silahkan download dan letakkan gambar berikut ini di folder icon :
3. Buat sebuah file css dan beri nama style.css.
body { font: 16px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }
#menu { position: relative; top: 100px; }
#menu li { list-style: none; }
.jqDockLabel { background: #333; color: #fff; padding: 3px 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
#menu { position: relative; top: 100px; }
#menu li { list-style: none; }
.jqDockLabel { background: #333; color: #fff; padding: 3px 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
4. Buat sebuah file html dan beri nama index.html. Panggil file css, library jquery, dan jqDock plugin. Ketik kode berikut di antara tag <head>.
<head>
<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>
<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 code berikut di antara tag <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>
<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>
* Merah : Alamat URL / halaman yang dituju.
* Biru : Judul menu.
6. Ketik kode jquery berikut ini diantara tag <head> untuk membuat efek menu ala Mac OS X ini.
<head>
. . . . . .
<script type="text/javascript">
$(function(){
$('#menu').jqDock({ align: 'middle', duration: 200, labels: 'tr', size: 48, distance: 85, fadeIn: 2000});
});
</script>
<title>Menu Dock</title>
</head>
. . . . . .
<script type="text/javascript">
$(function(){
$('#menu').jqDock({ align: 'middle', duration: 200, labels: 'tr', size: 48, distance: 85, fadeIn: 2000});
});
</script>
<title>Menu Dock</title>
</head>
Keterangan Kode :
Untuk membuat menu dock dengan jQuery jqDock plugin, method yang digunakan adalah method jqDock(). Ada beberapa parameter penting yang harus kita perhatikan untuk bisa membangkitkan efek ini. Parameter size merupakan ukuran image menu saat keadaan normal, yaitu 48. Parameter duration mengatur kecepatan animasi efek ini. Makin kecil nilainya, makin cepat. Parameter duration 200 menyatakan kecepatan animasi 200 milidetik. Parameter label = 'tr' (top-right) berarti title menu akan ditampilkan di bagian atas sebelah kanan menu ketika cursor berada di atas menu. Salah satu yang terpenting lagi karena kita akan membuat menu horizontal, kita harus mengatur parameter align dengan salah satu nilai berikut: top, middle, atau bottom.
7. Coba buka index.html pada web browser. Letakkan cursor di atas salah satu menu.
Selamat Mencoba. . .
Comment Now
0 komentar