CODEWITHSUNDEEP
javascriptjquerymobilecssresponsive-design
Lieutenant Dan
Lieutenant Dan

Reputation: 8274

Drop-Down Menu on :hover to tap twice for Mobile

UPDATE: Fri 9:12:13 AM

<div id="containerdropdown">
  <a class="mainNav navLink" href="" id="mainLink" onmouseover="rolloverMenu(1, 'mainMenu');" onmouseout="rolloverMenu(0, 'mainMenu');">ALL CATEGORIES</a>
  <div class="rolloverMenu" id="mainMenu" style="display: none;" onmouseover="rolloverMenu(1, 'mainMenu');$('.navLink').on('tap', function(){
   rolloverMenu(1, 'mainMenu');})" onmouseout="rolloverMenu(0, 'mainMenu');">

    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a>

  </div></div>

I've just tried the above code via the answered suggestion of calling on tap within the event handler. It still doesn't allow Tap > Drop-down > Double Tap > Visit Parent Link as the demo reference link below renders. Am I inserting the tap event in the wrong place? On my Android HTC Incredible 2, the parent link remains a standard link navigating to that page without the drop-down appearing?

I'm also loading this in the head: http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js

Original Question:

I have a website that I'm very close to publishing.

I have drop-down menus implemented across coded like:

<div id="containerdropdown">
  <a class="mainNav navLink" href="" id="mainLink" onmouseover="rolloverMenu(1, 'mainMenu');" onmouseout="rolloverMenu(0, 'mainMenu');">ALL CATEGORIES</a>
  <div class="rolloverMenu" id="mainMenu" style="display: none;" onmouseover="rolloverMenu(1, 'mainMenu');" onmouseout="rolloverMenu(0, 'mainMenu');">
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a>

They work fine on Desktop, OK (But still pretty bad on iOS), and absolutely terrible on Android and everywhere else on mobile.

I want this: http://suan.github.com/make_dropdown/demo.html

But I really don't want to recode all of my drop-downs. Could anyone suggest a code tweak that could allow my drop-downs to function on tap rather then on hover for mobile as the sample above??

Upvotes: 1

Views: 5020

Answers (3)

StephanieQ
StephanieQ

Reputation: 882

Okay, I know I'm totally necro-posting but I had a similar problem and came across this question trying to solve my own. Now that I've got an answer I might as well share :D

What I did, using regular jQuery and not jQuery mobile, was I wrote a class to display the submenu, then just toggled that class on and off using on touchstart and prevented its default. Then I used the setTimeout technique to detect double tap and go to the parent link. Here's a CodePen of it in action. http://codepen.io/StuffieStephie/pen/QbZjJP
Note: Ctrl+Shift+I if you're on a PC in Chrome to get to the developers' tools, then click the mobile device icon to emulate various touch devices.

 //Tap and double tap function for large touch screens
var tapped=false;
$("nav li.gotsMenus h3").on("touchstart", function(e){
    var theOne = $(this);
    if((!tapped)){
      tapped=setTimeout(function(){
//single tap function
            $("nav li.gotsMenus").not(theOne.parent()).removeClass("showSub");
        theOne.parent().toggleClass("showSub");
            e.preventDefault();
          tapped=null;
      },300); //wait 300ms
    } else {
//double tap function
      clearTimeout(tapped);
      tapped=null;
      window.location = $(this).find("a").attr("href");
    }
    e.preventDefault();
});

And here's the class we're toggling. 

nav li ul{
overflow: hidden;
max-height:0;
transition: max-height .5s ease-in; 
width: 200px;
position: absolute;
font-size: .8em;
}
nav li.showSub ul {
 max-height: 1000px;
}

I'm animating the max-height property for a slide effect, but you could just as easily toggle between display: none and display: block.

Upvotes: 2

Ram
Ram

Reputation: 144689

you can use jQuery Mobile tap event:

$('.navLink').bind('tap', function(){
   rolloverMenu(1, 'mainMenu');
})

Upvotes: 1

Matthew Darnell
Matthew Darnell

Reputation: 4588

.rolloverMenu { display:none; } /* You should hide this with CSS instead of inline; */
.navLink:hover + .rolloverMenu,
.navLink:focus + .rolloverMenu { display:block; }

Should work for keyboard navigation as well (although tabbing to the secondary menu would be tough). Might want to JS bind to focus as well as hover.

Upvotes: 0

Related Questions