Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.On an iPad mini in landscape (1024px) (and other devices), the main menu (non-mobile) shows. It looks great, but the drop downs don't work for items with submenus. The touch activates the parent link and the user can't select anything in the drop down. This is an issue with a lot of drop down menus, I know. However, I like the stock Gratis menus and would like to not drop in another menu module.
Unfortunately, I didn't catch this before the site went live (a rush job - http://focomx.focoma.org). Anyone have a good fix for this issue?
| Comment | File | Size | Author |
|---|---|---|---|
| #7 | superfish-touch.txt | 1.78 KB | alrueden |
Comments
Comment #1
Danny EnglanderI think the breakpoint for the desktop menu should probably be 1025px so an oversight on my part.
Comment #3
Danny EnglanderI've adjusted the media query to be more inline with tablet widths. This is now in dev, I'll cut a new release soon.
Comment #5
bhampton CreditAttribution: bhampton as a volunteer commentedI fell into the same problem as vionza did. After uploading the site to the production server, testing on a iPad 2 in landscape orientation shows the desktop menu but without the ability to click child menu items instead of the collapsed mobile menu. Rotating to portrait then the menu collapsed into the mobile form and works as designed. This is with either the 7.x.2.8 or the Dev versions of Gratis.
I checked out the Gratis demo site with the iPad and the menu does collapse as designed. So it doesn't appear to be fixed in the version available from Drupal, nor does it currently work on the site mentioned in vionza's original post. I really do like your menu system and want to keep it. Any help much appreciated.
Comment #6
Danny EnglanderOn my iPad in Landscape, I see the mobile menu but I have a Mini. I'll have to look into this a bit but I don't know when I will have any time honestly. If it's the case that you touch the top menu item and the dropdown does not appear, then you probably will need to add on a library called "doubleTapToGo".
Ideally this would be incorporated into Gratis at some point. I have used this before and it works really well. In order to use it, you may need to do a device query as some newer versions of iOS already do this by default, I think iOS 6 and later. So in effect, the DoubleTapToGo would be the default unless it's iOS 6 or later. You could look at some of these for ideas.
http://stackoverflow.com/questions/8348139/detect-ios-version-less-than-...
http://stackoverflow.com/questions/13280343/how-can-i-detect-specific-io...
... or just search "detect version of ios"
Comment #7
alrueden CreditAttribution: alrueden as a volunteer commentedFound a fix - I've attached my Gratis modification of Danny's touch-friendly Superfish code snippet on GitHub. I modified line 17 (or 19 in my version) to use the CSS selectors included with Gratis.
Save the file as superfish-touch.js, then include it in your theme in any of the usual ways. I created a Gratis subtheme and used the .info file to include this script, and it worked beautifully!
(For a little background, I also considered the breakpoint fix. However, that won't work for larger touch screens like the iPad Pro. Better to let dropdowns be dropdowns, as the above script does.)