Masih banyak plugin jquery yang dapat digunakan untuk membuat berbagai menu. Kreasi menu selanjutnya, kita akan membuat menu aimatif menggunakan kwicks jquery plugin.
VERTICAL MENU
1. Buat susunan direktori project Animated Menu yang isinya sebagai berikut :
- Folder images
- Index.html
- Jquery-1.4.2.min.js
- jquery.kwicks-1.5.1.js
- jquery.easing.1.3.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; }
.content li { width: 120px; height: 90px; margin-bottom: 3px; display: block; overflow: hidden; padding: 0; cursor:pointer; }
.content a { display:block; height:80px; text-indent:-9999px; outline:none; }
#menu1 { background-image: url('images/5.png'); }
#menu2 { background-image: url('images/6.png'); }
#menu3 { background-image: url('images/7.png'); }
#menu4 { background-image: url('images/8.png'); }
.content { list-style: none; position: relative; }
.content li { width: 120px; height: 90px; margin-bottom: 3px; display: block; overflow: hidden; padding: 0; cursor:pointer; }
.content a { display:block; height:80px; text-indent:-9999px; outline:none; }
#menu1 { background-image: url('images/5.png'); }
#menu2 { background-image: url('images/6.png'); }
#menu3 { background-image: url('images/7.png'); }
#menu4 { background-image: url('images/8.png'); }
4. Buat sebuah file html dan beri nama index.html. Panggil file css, library jquery, easing plugin 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.easing.1.3.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.easing.1.3.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 : 160,
spacing : 3,
isVertical : true,
duration: 1500,
easing: 'easeOutBounce'
});
});
</script>
<title>Animated Menu</title>
</head>
. . . . . .
<script type="text/javascript">
$().ready(function() {
$('.content').kwicks({
max : 160,
spacing : 3,
isVertical : true,
duration: 1500,
easing: 'easeOutBounce'
});
});
</script>
<title>Animated Menu</title>
</head>
Keterangan Kode :
Untuk membuat efek animasinya bergerak vertical, kita harus mengatur parameter isVertical bernilai "true". Parameter max sebesar 160 sesuai dengan panjang image background, yaitu 160px. Kita tambahkan efek lain, yaitu efek memantul dengan parameter easing "easeOutBounce". Parameter duration kita atur agak lama, yaitu 1500 agar efek gerak memantulnya lebih terlihat, Semakin kecil nilai parameter duration, semakin cepat gerakan animasinya.
7. Coba buka index.html pada web browser. Letakkan cursor di atas salah satu menu.
Selamat Mencoba. . .
Comment Now
0 komentar