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.
VERTIKAL 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: fixed; left: 10px; }
#menu li { list-style: none; }
.jqDockLabel { background: #333; color: #fff; padding: 3px 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
#menu { position: fixed; left: 10px; }
#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. Selanjutnya kita buat skrip jquery untuk membuat efek menu ala Mac OS X ini. Ketik kode jquery berikut ini di antara tag <head>
<head>
. . . . . .
<script type="text/javascript">
$(function(){
$('#menu').jqDock({
align: 'left',
duration: 200,
labels: 'br',
size: 48,
distance: 80,
fadeIn: 2000
});
});
</script>
<title>Menu Dock</title>
</head>
. . . . . .
<script type="text/javascript">
$(function(){
$('#menu').jqDock({
align: 'left',
duration: 200,
labels: 'br',
size: 48,
distance: 80,
fadeIn: 2000
});
});
</script>
<title>Menu Dock</title>
</head>
Keterangan Kode :
Untuk membuat menu dock dengan jQuery jqDock plugin, method yang digunakan adalah method jqDock(). Yang membedakan pembuatan menu ini secara horizontal da vertical adalah pengaturan parameter align. Untuk parameter align dengan salah satu nilai berikut: left, center, atau right. Kali ini parameter label adalah 'br' (bottom-right), ini berarti title menu akan ditampilkan pada bagian bawah sisi kanan dari menu.
7. Coba buka index.html pada web browser. Letakkan cursor di atas salah satu menu.
Selamat Mencoba. . .
Comment Now
0 komentar