Double-Tap to Go Plugin

For sites with landing pages, this is how to set up a plugin that allows the first tap to open the dropdown, and the second tap to go to the landing page link. It’s a bit tricky because it was pretty simple on Bootstrap 3 sites, but Bootstrap 4 sites require a bit more work.

One important thing to note is that this plugin will not work on resized desktop–it will only work on actual mobile devices.

How To

Plugin

The plugin source is here. Put that into your plugins folder.

HTML

Make sure to also include the new plugin into your scripts.mustache file for local testing.

Bootstrap 4 Script Updates

banno-functions.js

Add the doubletap function.

rundoubletap = function() {
  if ($('html').hasClass('touch')) {
      //navigation double tap to go to landing
      $('header.header .banno-menu > li:has(ul)').doubleTapToGo();
  }
}

You will also need to call it in your banno.site.initialize function.

scripts.js

You will need to call the function again inside of your window resize function.

Bootstrap 3 Script Updates - scripts.js only

Create a function to run the doubletap and place it anywhere, as long as it’s not inside another function. It targets any touch device and runs based on that.

rundoubletap = function() {
  if ($('html').hasClass('touch')) {
      //navigation double tap to go to landing
      $('header.header .banno-menu > li:has(ul)').doubleTapToGo();
  }
}

In your banno.site.initialize AND smartresize functions, you will need to call the above function like this.

rundoubletap();

Example Sites

Bootstrap 4

• GBC International Bank
• The National Bank of Texas at Fort Worth

Bootstrap 3

• Credit Union West
• Neighborhood Credit Union [Not certain that this is actually using the plugin, but it certainly works as though it does. It works on desktop too, unlike the others. The Explore category in the menu is also a landing page, second click takes you to the landing.]
• First Sound Bank

Tags: bs2, bs3, bs4, script, menu