I added a bit of code to automatically close the menu after 4 seconds of inaction.

Sharing below.

Comments

ken hawkins’s picture

ken hawkins commented

Starting at line 13:

    // click / rollover code for displaying our menu
    jQuery('div#javascript-tabs div#javascript-tabs-rollover').click(function() {
        jQuery('div#javascript-tabs ul#javascript-tabs-primary').slideToggle('fast');
    });
    
+    // timeout the slide to fade after 4 seconds of non-interaction
+    function hidetabs(){
+      if ((jQuery('div#javascript-tabs ul#javascript-tabs-primary').is(':hover') === false) && (jQuery('div#javascript-tabs div#javascript-tabs-rollover').is(':hover') === false)) { 
+        jQuery('div#javascript-tabs ul#javascript-tabs-primary').slideToggle(); 
+      }
+    }
+
+    jQuery('div#javascript-tabs ul#javascript-tabs-primary').mouseleave(function() { 
+      setTimeout(hidetabs, 4000); 
+    });
+    jQuery('div#javascript-tabs div#javascript-tabs-rollover').mouseleave(function() { 
+      setTimeout(hidetabs, 4000); 
+    });
  }
};
vip_sa’s picture

vip_sa commented

Where must these lines of code go please?

ken hawkins’s picture

ken hawkins commented

This goes into the "javascript_tabs.js" file

vip_sa’s picture

vip_sa commented

Thank you

Sunlight Studios’s picture

Sunlight Studios commented

I have uploaded version 1.4 of the module which incorporates your suggestion, once this has been pushed through to the download page then please give it a try.

The only addition I made was to clear the timeout on each mouseleave before re-setting it, otherwise the slideToggle() could be queued multiple times if the mouse moved quickly in & out of the menu (ie. the menu would close & open over and over and look a bit weird).

Sunlight Studios’s picture

Sunlight Studios commented
Status: Needs review » Closed (fixed)