{"id":4,"date":"2011-06-03T04:42:56","date_gmt":"2011-06-03T04:42:56","guid":{"rendered":"http:\/\/tier7.net\/blog\/?p=4"},"modified":"2011-06-03T04:46:31","modified_gmt":"2011-06-03T04:46:31","slug":"timedrop-menus-with-jquery","status":"publish","type":"post","link":"https:\/\/tier7.net\/blog\/2011\/06\/timedrop-menus-with-jquery\/","title":{"rendered":"TimeDrop Menus with jQuery"},"content":{"rendered":"

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.
\njQuery.timeDrop.js<\/strong><\/p>\n

\r\n\/*
\r\n  Timed drop-down menus using jQuery
\r\n  2010 Tier7.net
\r\n*\/
\r\n(function( $ ){
\r\n  $.fn.timeDrop = function() {
\r\n  \/\/---------------------------------------------------------------
\r\n  \/\/ jQuery TimeDrop Menus v0.1
\r\n  \/\/---------------------------------------------------------------
\r\n  var dropTimer = 0;
\r\n  var menu = this;
\r\n  this.hover(function(){
\r\n    $("ul", this).slideDown('fast').not('.time-drop-toggled').addClass('ti\r\nme-drop-toggled');
\r\n    menu.parents("ul").not('.time-drop-toggled').hide();
\r\n    clearTimeout(dropTimer);
\r\n  },function(){
\r\n    $("ul", menu).removeClass('time-drop-toggled');
\r\n    dropTimer=setTimeout(function(){$("ul", menu).not('.time-drop-toggled')\r\n.slideUp('fast');}, 1100);
\r\n  });
\r\n  };
\r\n})( jQuery );\r\n  <\/pre>\n
CSS<\/strong><\/p>\n
\r\n  No special CSS required at this time.
\r\n<\/pre>\n
Code For Single Drop Down<\/strong><\/p>\n
\r\n<div class="time-drop-menu"><a href="#">My Menu<\/a>
\r\n  <ul>
\r\n    <li><a href="#">Menu item 1<\/a><\/li>
\r\n    <li><a href="#">Menu item 2<\/a><\/li>
\r\n    <li><a href="#">Menu item 3<\/a><\/li>
\r\n  <\/ul>
\r\n<\/div>
\r\n<script>
\r\n  $(".time-drop-menu").timeDrop();
\r\n<\/script>
\r\n  <\/pre>\n
Code For Multi Drop Down<\/strong><\/p>\n
\r\n<ul class="time-drop-menu">
\r\n  <li><a href="#">First Menu<\/a>
\r\n    <ul>
\r\n      <li><a href="#">Menu item 1<\/a><\/li>
\r\n      <li><a href="#">Menu item 2<\/a><\/li>
\r\n      <li><a href="#">Menu item 3<\/a><\/li>
\r\n    <\/ul>
\r\n  <\/li>
\r\n  <li><a href="#">Second Menu<\/a>
\r\n    <ul>
\r\n      <li><a href="#">Menu item 1<\/a><\/li>
\r\n      <li><a href="#">Menu item 2<\/a><\/li>
\r\n      <li><a href="#">Menu item 3<\/a><\/li>
\r\n    <\/ul>
\r\n  <\/li>
\r\n<\/ul>
\r\n<script>
\r\n  $(".time-drop-menu > li").timeDrop();
\r\n<\/script>
\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,3],"tags":[6,7,4,8,9,5],"class_list":["post-4","post","type-post","status-publish","format-standard","hentry","category-uncategorized","category-web-development","tag-css","tag-javascript","tag-jquery","tag-web-design","tag-web-development-2","tag-xhtml"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/posts\/4","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/comments?post=4"}],"version-history":[{"count":6,"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/posts\/4\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/posts\/4\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/media?parent=4"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/categories?post=4"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tier7.net\/blog\/wp-json\/wp\/v2\/tags?post=4"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}