Skip navigation
coyott07
Currently Being Moderated

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

I have the Spry Menu 2.0 pretty much dialed in how I want it.  However, when the user taps the menu item from an iPad or iPhone for that matter, they have to tap the drop-down menu item twice for it to work.  All the menu items work fine on the first tap except ones that have a drop-down.  Is there a way to get the drop-down to pop up and work on the first tap from an iPad?  Here is the code of that helps.

 

<ul id="MenuBarUpgradeAugust2012">

        <li> <a href="default.html">Home</a></li>

        <li><a href="apps4kids.html">About</a></li>

        <li><a class="MenuBarItemSubmenu">Our Apps</a>

          <ul>

            <li> <a href="Rhyme-N-Time.html">Rhyme-N-Time</a></li>

            <li> <a href="Free-The-Bee.html">Free The Bee</a></li>

            <li> <a href="Trojan-Math.html">Trojan Math</a></li>

            <li> <a href="Helping-Santa.html">Helping Santa</a></li>

          </ul>

        </li>

        <li> <a href="smart-apps.html">Contact</a></li>

      </ul>

 

Thanks,

 

Scott

 
Replies
  • Currently Being Moderated
    Aug 31, 2012 7:59 AM   in reply to coyott07

    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
    Sep 1, 2012 11:30 AM   in reply to coyott07

    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
    Sep 1, 2012 11:52 AM   in reply to David_Powers

    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
    Sep 1, 2012 2:36 PM   in reply to Al Sparber

    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
    Sep 2, 2012 9:56 AM   in reply to coyott07

    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:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points