Masih banyak plugin jquery yang dapat digunakan untuk membuat berbagai menu. Kreasi menu selanjutnya, kita akan membuat menu aimatif menggunakan kwicks jquery plugin.
HORIZONTAL MENU
1. Buat susunan direktori project Animated Menu yang seperti berikut ini :
- Folder images
- Index.html
- Jquery-1.4.2.min.js
- jquery.kwicks-1.5.1.js
- Style.css
2. Silahkan download dan letakkan gambar berikut ini di folder images :
3. Ketik kode css seperti berikut lalu beri nama style.css.
body { background-color:#CCCCCC }
.content { list-style: none; position: relative; margin: 0 auto; padding: 0; }
.content li { width: 140px; height: 100px; margin-right: 5px; float: left; display: block; overflow: hidden; padding: 0; cursor:pointer; }
.content a { display:block; height:100px; text-indent:-9999px; outline:none; }
#menu1 { background-image: url('images/1.png'); }
#menu2 { background-image: url('images/2.png'); }
#menu3 { background-image: url('images/3.png'); }
#menu4 { background-image: url('images/4.png'); }
.content { list-style: none; position: relative; margin: 0 auto; padding: 0; }
.content li { width: 140px; height: 100px; margin-right: 5px; float: left; display: block; overflow: hidden; padding: 0; cursor:pointer; }
.content a { display:block; height:100px; text-indent:-9999px; outline:none; }
#menu1 { background-image: url('images/1.png'); }
#menu2 { background-image: url('images/2.png'); }
#menu3 { background-image: url('images/3.png'); }
#menu4 { background-image: url('images/4.png'); }
Perhatikan selector class '.content li', di sini kita atur height 100px sesuai ukuran image background menu dan width 140px sehingga image yang terlihat di awal hanya selebar 140px dari kiri. Kita buat id selector menu1-menu4 dengan background-image masing-masing.
4. Buat sebuah file html dan beri nama index.html. Panggil file css, library jquery dan kwicks plugin. Ketik kode berikut di antara tag <head>.
<head>
<link rel="stylesheet" href="style.css" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.kwicks-1.5.1.js" type="text/javascript"></script>
<title>Animated Menu</title>
</head>
<link rel="stylesheet" href="style.css" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.kwicks-1.5.1.js" type="text/javascript"></script>
<title>Animated Menu</title>
</head>
5. Kita buat 4 buah menu utama. Ketik kode berikut di antara tag <body>.
<body>
<ul class="content" >
<li id="menu1"><a href="#"></a></li>
<li id="menu2"><a href="#"></a></li>
<li id="menu3"><a href="#"></a></li>
<li id="menu4"><a href="#"></a></li>
</ul>
</body>
<ul class="content" >
<li id="menu1"><a href="#"></a></li>
<li id="menu2"><a href="#"></a></li>
<li id="menu3"><a href="#"></a></li>
<li id="menu4"><a href="#"></a></li>
</ul>
</body>
* Merah : Alamat URL / halaman yang dituju.
6. Ketik kode jquery berikut ini diantara tag <head> untuk membuat efek animasi menu.
<head>
. . . . . .
<script type="text/javascript">
$().ready(function() {
$('.content').kwicks({
max : 220,
spacing : 2
});
});
</script>
<title>Animated Menu</title>
</head>
. . . . . .
<script type="text/javascript">
$().ready(function() {
$('.content').kwicks({
max : 220,
spacing : 2
});
});
</script>
<title>Animated Menu</title>
</head>
Keterangan Kode :
Untuk menggunakan plugin kwicks ini caranya dengan memanggil method kwicks(). Kita atur beberapa parameter yang ada. Yang terpenting adalah parameter max. Parameter max menentukan sepanjang apa elemen kwicks (menu) akan di animasikan, kali ini kita atur 220 sesuai ukuran lebar dari image background menu.
7. Coba buka index.html pada web browser. Letakkan cursor di atas salah satu menu.
Selamat Mencoba. . .
Comment Now
0 komentar