Home
Guestbook
About
Message
FeedFungsi dan perbedaan toggle(), fadeToggle(), slideToggle() pada jQuery
Toggle Menu biasa digunakan untuk memperingkas penampilan website supaya tidak memenuhi ruangan karena memang keberadaannya tidak membutuhkan tempat khusus. Karena keunikannya tersebut Toggle Menu mempunyai daya tarik tersendiri.
Cara membuat Toggle Menu menggunakan jQuery sangat mudah. Jika dulu kita membuat Toggle Menu menggunakan javascript harus menulis script yang panjang dan dengan hasil monoton, kini dengan hadirnya jQuery seolah mempertegas bahwa Toggle Menu bukan sesuatu yang mewah lagi.
Untuk dapat bekerja dengan jQuery pertama kita pasang kode berikut di header website. (kalau sudah ada abaikan saja)
<script type="text/javascript src="//code.jquery.com/jquery-latest.js"></script>
Sebelum menulis kode jQuery alangkah baiknya jika kita mengenal dulu dengan beberapa method sang pencipta efek Toggle Menu.
.toggle([duration] [, easing] [, complete]); //memberikan efek toggle yang sangat kasar .fadeToggle([duration] [, easing] [, complete]); //memberikan efek toggle dengan fading berdasarkan waktu yang ditentukan .slideToggle([duration] [, easing] [, complete]); //memberikan efek toggle dengan gaya sliding
Arguments
duration
String atau angka untuk menentukan lama animasi yang berjalan (default 400).
easing
String untuk memberikan efek pada animasi saat berjalan (default swing).
complete
Fungsi yang akan dikembalikan ketika animasi telah komplit.
Sekarang adalah waktunya untuk menulis kode jQuery. Buat file misalnya dengan nama dropdown.js lalu isi dengan salah satu kode dibawah ini sesuai dengan efek yang Anda inginkan.
// toggle()
$(document).ready(function() {
$(".dropdown-toggle").click(function() {
$(this).parent().find(".dropdown-menu").toggle(); }); });
// fadeToggle()
$(document).ready(function() {
$(".dropdown-toggle").click(function() {
$(this).parent().find(".dropdown-menu").fadeToggle(); }); });
// slideToggle()
$(document).ready(function() {
$(".dropdown-toggle").click(function() {
$(this).parent().find(".dropdown-menu").slideToggle(); }); });
Kode diatas terdapat tiga script yang berbeda, Anda hanya perlu menulis satu kode saja untuk membuat Toggle Menu dalam jumlah banyak. Berlanjut ke CSS, buat file misal dengan nama dropdown.css lalu copy kode dibawah ini.
.dropdown {
position: relative;
}
.dropdown-toggle {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 6px 12px;
background-image:linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
font-size: 14px;
cursor: pointer;
color: #333;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 120px;
box-shadow: 0 0 7px #eee;
border: 1px solid #ccc;
border-radius: 4px;
list-style: none;
background: #fff;
padding: 0;
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
text-decoration: none;
color: #333;
}
.dropdown-menu>li>a:hover {
background: #eee;
}
Terakhir adalah cara instalasi kode yang telah kita buat ke dalam bentuk HTML.
<!DOCTYPE html> <html> <head> <title>Membuat Toggle Menu Dengan jQuery</title> <link rel="stylesheet" type="text/css" href="dropdown.css" media="all,handheld"/> <script type="text/javascript" src="/code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="dropdown.js"></script> </head> <body> <div class="dropdown"> <button class="dropdown-toggle">Toggle Menu</button> <ul class="dropdown-menu"> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> </ul> </div> </body> </html>
Setelah selesai simpan pekerjaan Anda, periksa apakah pekerjaan Anda sudah benar. Jika kode dapat berjalan dengan baik, kini saatnya bilang SEMPURNA!!!