Why does this menu not work in the mobile version?

Asked

Viewed 844 times

4

I was looking for some menus/layouts templates and found that very cool, but when I googled to the mobile view when I clicked on the menu the 1st ball came and went, instead of seeing all of them and staying there until I click the button again.

I want to know how I can make this menu work properly in any screen resolution and on any device. I think it’s something in this mousedown no . JS, but I’m still Newbie in JS/Jquery....

Online compiler of the template itself: CODEPEN

javascript jquery html css menu

2 answers

4


In your code both events are triggered and the code is undone. You can detect if it is mobile and add the right event, avoiding mixing Apis:

var ev = 'ontouchstart' in window ? 'touchstart' : 'mousedown';
$('.parent2').on(ev, function() {

codepen: http://codepen.io/anon/pen/mJewqj

  • 1

    It worked and with 1 more line of code, perfect. I just changed the mousedown for click by conscience.

1

The menu is working, but on the mobile the event is activated several times, giving the impression that the menu is stuck. This becomes more evident we change the color of the button every time the event is activated: http://codepen.io/anon/pen/oXjwWe

To solve this, you can do as in this question, using a timer to limit the time the event is activated:

$(document).ready(function() {
  var active1 = false;
  var active2 = false;
  var active3 = false;
  var active4 = false;
    var flag = false;

    $('.parent2').on('touchstart click', function() {
        if (!flag) {
            flag = true;
            setTimeout(function(){ flag = false; }, 100);
            if (!active1) $(this).find('.test1').css({'background-color': 'gray', 'transform': 'translate(0px,125px)'});
            else $(this).find('.test1').css({'background-color': 'dimGray', 'transform': 'none'}); 
             if (!active2) $(this).find('.test2').css({'background-color': 'gray', 'transform': 'translate(60px,105px)'});
            else $(this).find('.test2').css({'background-color': 'darkGray', 'transform': 'none'});
              if (!active3) $(this).find('.test3').css({'background-color': 'gray', 'transform': 'translate(105px,60px)'});
            else $(this).find('.test3').css({'background-color': 'silver', 'transform': 'none'});
              if (!active4) $(this).find('.test4').css({'background-color': 'gray', 'transform': 'translate(125px,0px)'});
            else $(this).find('.test4').css({'background-color': 'silver', 'transform': 'none'});
            active1 = !active1;
            active2 = !active2;
            active3 = !active3;
            active4 = !active4;
        }
    });
});

Note that I have changed the event conditions of on for touchstart click. I tested on my mobile and function click also worked without problems. Demo: http://codepen.io/anon/pen/jPbwwg

I recommend you leave the time of the setTimeout between 500ms and 1000ms, so it gives time the menu start to open and see it running, before it suddenly close.

Browser other questions tagged javascript jquery html css menu

You are not signed in. Login or sign up in order to post.