Wednesday, October 14, 2015
Advertisement
Advertisement
Bagaimana cara untuk membuat animasi dropdown dengan menggunakan effect slideToggle pada JQuery ? Apa kodenya cukup panjang ? Apa kodenya rumit ? Tentu saja tidak, jika kita mau mencobanya .
Menu Dropdown sangat bermanfaat sekali dalam pengelompokkan beberapa menu dalam satu kategori menu dan bermanfaat sekali dalam mengurangi space/letak elemen html menunya .
Mungkin anda sudah pernah membaca atau mendengar cara untuk membuat animasi dropdown dan tentunya pasti banyak yang anda temukan adalah dengan effect CSS3 . Mungkin pula juga banyak yang menggunakan simpel kode JQuery seperti yang akan diposting berikut.
Yang akan dibagikan di postingan ini hanya sebagian kode yang rumayan cukup simpel yang dimana merupakan penggabungan CSS dan JQuery untuk memberi efeknya . Kita menggunakan slideToggle() original JQuery sebagai animasinya dan bisa anda kembangkan lagi dengan efek yang fantastis lainya.
Bagaimana untuk kodenya ?
Pertama, kita include dulu sebuah file JQuerynya, baca Pengertian JQuery dan fungsinya untuk memahami lebih lanjut apa itu jquery .
lat_jq_dropdown.html
<html>
<head>
<title>Dropdown Jquery</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
body{
font-family: agency fb;
margin: 0;
padding: 0;
}
.menu {
position: relative;
margin: 0;
padding: 0;
background: #EBEBEB;
width: 100%;
}
.menu li{
padding:20px 16px;
float: left;
list-style: none;
position: relative;
background: #EBEBEB;
}
.menu > li a{
font-size: 1.3em;
color:#4f4f4f;
text-decoration: none;
transition: 1s;
padding:
}
.menu > li:hover{
background: #9E9E9E;
}
.menu li ul{
background:#F5F5F5 ;
position: absolute;
left:0;
top:67px;
z-index: 2;
width:155px;
padding: 0;
}
.sub ul{
display: none;
}
.menu li ul li{
width: 100%;
color:black;
}
.menu li ul li:hover{
background-color: #9E9E9E;
}
.danger{
text-transform: uppercase;
color:red;
font-weight: bold;
font-size: 1.4em;
margin-top: 60px;
padding-left: 20px;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li ><a href="">Privacy</a>
</li>
<li class="sub"><a href="">Menu 4</a>
<ul>
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
<li><a href="">Submenu 2</a></li>
</ul>
</li>
<li><a href="">Menu 5</a></li>
</ul>
<span class="danger">Indonesiakode.blogspot.com</span>
<script type="text/javascript">
$(function(){
$(".sub").hover(function(){
$(this).find('ul').slideDown(200);
},function(){
$(this).find('ul').slideUp(200);
});
});
</script>
</body>
</html>
Untuk demonya, silahkan lihat gambar gif paling atas .Pada elemen <li> yang mempunyai elemen lagi di dalamnya, yaitu <ul> kita tambahkan sebuah class yang bernama .sub lalu pada style cssnya kita disable elemen <ul> yang berada di dalam kode <li class="sub"> ( lihat pada line number 53 - 55 ) pada cssnya kita kasih propery dan value display:none yang dimana menandakan bahwa class sub dengan elemen ul elemnya disembunyikan .
Setelah itu memanggil sebuah selector dan diikuti dengan efek hover yang dimana Efek hover pada JQuery mempunyai dua fungsi yaitu satu untuk ketika mouse mendekati sebuah elemen dan yang kedua fungsinya menunjukkan proses yang terjadi ketika mouse meninggalkan menu .
( line number 98 - 102 ) Ketika mouse memasuki sebuah elemen <li> yang mempunyai class sub, maka akan mencari sebuah elemen <ul> di dalamnya lalu dianimasikan dengan slideDown(timing),
Jika mouse keluar dari elemen tersebut maka akan menjalankan slideDown(timing) .
Efek hover merupakan gabungan dari sebuah efek mouseenter() dan mouseleave() .
Ubah class .sub dengan yang anda inginkan dan jangan lupa ganti CSS dan Selector ( Memahami apa itu Selector pada JQuery ) JSnya.
Bisa digabungkan dengan plugin JQuery Easing Plugin untuk menambah efek fantastik lainya, baca Membuat Efek animasi jadi lebih keren dengan Jquery Easing Plugin .
Advertisement
Advertisement