jQuery HoverDown (Accordian)
- Main item: Hover over me!
- submenu 1
- submenu 2
- submenu 3
- submenu 4
- submenu 5
Kod Untuk HoverDown
<script src="http://jquery.com/src/jquery-latest.js"></script>
<script>
jQuery.noConflict();
(function($) {
var navTimer = null;
$(document).ready(function() {
$("li.menu").hover(function(){
if ( navTimer ) {
clearTimeout( navTimer );
navTimer = null;
} else
$("ul.submenu").slideDown("slow");
}, function(){
navTimer = setTimeout(function(){
$("ul.submenu").slideUp("slow");
navTimer = null;
}, 500);
});
});
})(jQuery);
</script>
<style type="text/css">
ul {width:350px;}
ul li.menu {background:#FCFFBB;}
ul ul {display:none};
</style>
<ul>
<li class="menu"><a href="#">Main item: Hover over me!</a>
<ul class="submenu">
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
<li>submenu 4</li>
<li>submenu 5</li>
</ul>
</li>
</ul>