TimeDrop Menus with jQuery

TimeDrop menu is a plugin for jQuery based on common drop-down methods, but allows for drop down menus that will persist until a timeout triggers them to close. This allows the user to jump off the menu for a short time, then come back to it without the menu closing.
jQuery.timeDrop.js

/*
Timed drop-down menus using jQuery
2010 Tier7.net
*/
(function( $ ){
$.fn.timeDrop = function() {
//---------------------------------------------------------------
// jQuery TimeDrop Menus v0.1
//---------------------------------------------------------------
var dropTimer = 0;
var menu = this;
this.hover(function(){
$("ul", this).slideDown('fast').not('.time-drop-toggled').addClass('ti me-drop-toggled');
menu.parents("ul").not('.time-drop-toggled').hide();
clearTimeout(dropTimer);
},function(){
$("ul", menu).removeClass('time-drop-toggled');
dropTimer=setTimeout(function(){$("ul", menu).not('.time-drop-toggled') .slideUp('fast');}, 1100);
});
};
})( jQuery );

CSS

  No special CSS required at this time.

Code For Single Drop Down

<div class="time-drop-menu"><a href="#">My Menu</a>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</div>
<script>
$(".time-drop-menu").timeDrop();
</script>

Code For Multi Drop Down

<ul class="time-drop-menu">
<li><a href="#">First Menu</a>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
<li><a href="#">Second Menu</a>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
</ul>
<script>
$(".time-drop-menu > li").timeDrop();
</script>
This entry was posted in Uncategorized, Web Development and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *