Wordpress Foundations submenu not displaying in iPad

Question

i'm still new to the mobile / fluid / responsive game and am having issues with the submenu on this site: http://www.medowsconstruction.com/

the click on mobile should replace the :hover function automagically right? seems to be the case with the standard Foundation theme.

i hadn't changed anything in those mobile specific areas of the framework, so what did I do to mess it up and cause the submenu to not show on iPad / touch?

thanks for any help

score 1 · Accepted Answer · edited May 23 '17 at 12:27

It seems that the problem is that this is not a standard pure CSS dropdown menu, as one might assume. Instead, it's been controled by jQuery. You can see it in the app.js file:

$('.nav-bar>li.has-flyout').hover(function() {
      $(this).children('.flyout').show();
    }, function() {
      $(this).children('.flyout').hide();
    });

So you should modify the script in order to work with a touch for selected devices (there is a good discussion on that topic here). Here I am using a simple statement. I have not been able to test it in iPad, but you could have good results if you try to use something like (untested!):

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('.nav-bar>li.has-flyout').bind('touch', function() {
      $(this).children('.flyout').slideToggle();
    });
} else {

$('.nav-bar>li.has-flyout').hover(function() {
          $(this).children('.flyout').show();
        }, function() {
          $(this).children('.flyout').hide();
        });
}

This should give you some clues on how to deal with that. Let us know if it works.

There is also a lot of information in this stackoverflow discussion about hover and touch devices.

herman, thanks a bunch for the help. it looks like what you've got would/should work. i think this is accounted for, though, in some of the Foundations scripts with Modernizer.js. this line in particular: if (Modernizr.touch || navigator.userAgent.match(/Windows Phone/i)) { at any rate, that wasn't working and neither did your script or any derivatives i tried to come up with. looks like i need to find an iPad testing agent that has a dev mode in it so i can really check out what's going awry :\ — John Blythe, Oct 25 '12 at 13:26
I think you are working on it, but, right now, it seems to work in iPad. I just took a look at it and the submenus shows on touch events. I hope it helps. — Hernan, Oct 25 '12 at 13:42

score 0 · Answer 2 · answered Oct 25 '12 at 13:45

thanks to @hernan for setting me in the right direction with things.

i ended up fixing it up by mixing the Foundation code with his code with some better selectors. here's what I landed with:

if (navigator.userAgent.match(Modernizr.touch || navigator.userAgent.match(/Windows Phone/i))) {
    $('.nav-bar>li.has-flyout').on('click.fndtn touchstart.fndtn', function(e) {
        e.preventDefault();
        var flyout = $(this).children('.flyout').first();
        if (lockNavBar === false) {
            $('.nav-bar .flyout').not(flyout).slideUp(500);
                flyout.slideToggle(500, function(){
                lockNavBar = false;
            });
        }
        else
        {
            flyout.slideToggle(500);
        }
    });

i'l definitely be checking into those two links / discussions you mentioned, too, hernan.

thanks again-

Wordpress Foundations submenu not displaying in iPad

2 Answers2