I was looking for menu templates / layouts and found that pretty cool, but when I passed google to the cell phone view when I clicked on the menu the 1st ball would come and go, instead of coming all of them and staying there until I clicked the button again.
I want to know how I can make this menu work correctly on any screen resolution and on any device. I think it's something in this mousedown in .JS, but I'm still newbie in JS / JQuery ....
In this code both events are triggered and the code is canceled. 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() {
The menu is working, but in the mobile the event is activated several times, giving the impression that the menu is locked. This becomes more evident as we change the button color every time the event is activated: link
To resolve 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 changed the event conditions from on to touchstart click . I tested it on my phone and the click function also worked without problems.
Demo: link
I recommend that you leave the time of setTimeout between 500ms and 1000ms, so it is time for the menu to start opening and to see it working, before it suddenly closes.