Follow these steps to take advantage of the hoverIntent plugin for your menu:
- In the Superfish download, locate the
hoverIntent.jsfile inside thejsfolder and copy the file to your ownscriptsfolder. - Next, we need to attach the hoverIntent plugin to our HTML page.
Tip
Don't forget to keep dependencies in mind when attaching multiple JavaScript files to a page. All jQuery plugins depend on jQuery to operate, so jQuery needs to be attached to your page before any plugins. In this case, the Superfish plugin depends upon the hoverIntent plugin, so we need to make sure hoverIntent is added to our page before the Superfish plugin.
- Add the new
<script>tag to the bottom of your page with the other scripts as follows:<script src="scripts/jquery.js"></script> <script src="scripts/hoverIntent.js"></script> <script src="scripts/superfish.js"></script> <script src="scripts/scripts.js"> </script> </body> </html>
Now if you refresh the page in a browser, you'll see that there's a short pause when your mouse moves over the menu before the nested submenu appears. And if you run your mouse across the page quickly, crossing the menu, no unwanted submenus appear on the page.
Have a go hero — set your own speed
Try using the different customization options for the Superfish plugin that are outlined in the documentation to adjust the speed of the animation that shows the submenus.