Often, rather than using the double-tap to go plugin, clients will opt to have the categories be non-clickable on mobile, so they open the dropdown as expected. However, that raises the question about how to access those landing pages. What’s usually done is to put a link as the first or last item in the menu builder (as long as it’s consistent!) that also goes to the landing page. This link is hidden on desktop, but is made visible once the menu is collapsed.
Needless to say, the client (and sometimes even the PC) will delete the “backup” landing page and then get confused about why the first link in their menu is missing. Remind them that the first link (or last, or whatever was decided upon) is reserved for the landing page, and will break if not used properly.
How To - scripts.js
This example works on 993px and down. It disables the landing page href on touch devices and shows the first page within the dropdown as the “backup” landing page.
$('nav.navbar .banno-menu > li > a.dropdown-toggle').each(function(e) { // Finds the first item and adds a class to allow the landing page to be shown/hidden with CSS
$(this).siblings('ul.dropdown-menu').children('li:first').addClass('landing-page-link');
});
if (($(window).width() < 993) || $("html[data-whatinput='touch']").length >= 1) { //Removes the landing page functionality
$('nav.navbar .banno-menu > li > a.dropdown-toggle').each(function(e) {
$(this).on('click',function(e) {
e.preventDefault();
e.stopPropagation();
$(this).parents('li').toggleClass('open active');
$(this).parents('li').siblings('li').removeClass('active open showing');
})
$(this).attr('href','#');
$(this).siblings('ul.dropdown-menu').children('landing-page-link').show();
});
}
Example Sites
Tags: bs2, bs3, bs4, menu