Adobe Community: Why does the drop-down menu with a Spry Widget 2.0 take two taps to activate on iPad?

Currently Being Moderated

1. Jon Fritz II,

Aug 31, 2012 7:59 AM in reply to coyott07

Report

I don't quite understand. Do they have to tap the dropped down items twice, or the menu item with the drop down twice?

Example for clarification:

Menu Item 1 - Menu Item 2 - Menu Item 3

sub 1

sub 2

So they tap Menu Item 2 or 3 once and it goes to the link. Are you talking about tapping twice on "Menu Item 1" or needing to tap twice on "sub 1" or "sub 2"

|

Mark as:

Currently Being Moderated

2. coyott07,

Aug 31, 2012 8:04 AM in reply to Jon Fritz II

Report

If they tapped on menu item 2 or 3 it goes directly to the link just like it is supposed too. However, when they tap menu item 1 once it doesn't do anything. If they then tap menu item 1 again, they get the drop down menu and can get to sub 1 and sub 2 just fine. Again, this only happens on the iPad/iPhone.

|

Mark as:

Currently Being Moderated

3. David_Powers,

Sep 1, 2012 11:30 AM in reply to coyott07

Report

Spry menus use JavaScript mouseover and mouseout events to trigger submenus. These are the equivalent of hovering. You can't hover on a touch-screen device. A single tap activates a link if one's there. If there's no link, tapping twice activates the submenu.

The bottom line is that Spry menus weren't designed for touch-screen devices.

|

Mark as:

Currently Being Moderated

4. Al Sparber,

Sep 1, 2012 11:52 AM in reply to David_Powers

Report

Hi David,

Actually, that sounds backwards (but it is Spry In a mobile device,

if a root item is both a live link and a trigger for a sub-menu, the

first tap should reveal the sub-menu and a second tap should execute the

link. On a root item that is a null link and a sub-menu trigger, the

first tap reveals the sub-menu and a second tap closes the sub-menu. I

know one menu system for Dreamweaver that actually does that

--

Al Sparber - PVII

http://www.projectseven.com

The Finest Dreamweaver Menus | Galleries | Widgets

Since 1998

|

Mark as:

Currently Being Moderated

5. coyott07,

Sep 1, 2012 12:21 PM in reply to Al Sparber

Report

Thanks for taking a look guys. I will give your method a shot Al, but not until my Huskers dominate poor Southern Miss. I am fully aware I could be jinxing Nebraska, but I'm crazy like that.

I can live with the way it is now but was hoping 1 tap could reveal the submenu.

Thanks again,

Scott

|

Mark as:

Currently Being Moderated

6. David_Powers,

Sep 1, 2012 2:36 PM in reply to Al Sparber

Report

Al Sparber wrote:

Actually, that sounds backwards (but it is Spry In a mobile device,
if a root item is both a live link and a trigger for a sub-menu, the
first tap should reveal the sub-menu and a second tap should execute the
link. On a root item that is a null link and a sub-menu trigger, the
first tap reveals the sub-menu and a second tap closes the sub-menu.

I haven't played around with Spry menus on touch-screen devices, but I did a lot of testing recently with the effect of hover on Android and iOS devices. What I found was that if a menu item has a direct link to a page, Android devices follow the link immediately without displaying any submenu. On iOS, tapping the link once displays a submenu if one exists. To follow the link, you have to tap twice.

The bottom line remains that drop-down/flyout menus designed for mouse-driven events need to be redesigned for touch screens.

|

Mark as:

Currently Being Moderated

7. coyott07,

Sep 2, 2012 8:43 AM in reply to David_Powers

Report

Well, I have tried several variations of what you have suggested Al but I can’t seem to get the menu to drop down on the first click. My site is visited about 50% through PCs/Macs and 50% through mobile devices, so I certainly would prefer to have 1 click work for the drop-downs. I would think some kind of “onclick” event would do the trick, but I can’t seem to get it to work either.

|

Mark as:

Currently Being Moderated

8. Al Sparber,

Sep 2, 2012 9:56 AM in reply to coyott07

Report

If you are trying to fix the Spry menu, I think the amount of coding it would take would not be worth the effort. I would use a more modern menu system. The jQuery Superfish menu would work, I believe, as you want in mobile devices - or if you have a budget and want lots of features and lots of automation, I know our menu system would work. Here is a live example with real links on the menu so you can test on mobile:

http://www.projectseven.com/products/menusystems/pmm2/testing/mobile/i ndex.htm

|

Mark as:

Currently Being Moderated

9. coyott07,

Sep 3, 2012 6:56 AM in reply to Al Sparber

Report

Okay, I was able to find a work around from a post in the forum on a similar problem. Here is what they posted and it worked for me. I just hope this doesn't break anything else.

Change the top lines to the lines on the bottom.

I was able to figure it out the other night actually. I needed to change this:

var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
      widgetID: "MenuBar",
      widgetClass: "MenuBar MenuBarRightShrink",
      insertMenuBarBreak: false,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 100,
      subMenuHideDelay: 200
      });

To:

var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetClass: "MenuBar MenuBarRightShrink"
});

I hope this doesn't mess anything else up, but no issues to date.

|

Mark as:

Dreamweaver

Why does the drop-down menu with a Spry Widget 2.0 take two taps to activate on iPad?

Aug 31, 2012 7:17 AM

More Like This

Bookmarked By (0)

Answers + Points = Status