Click and Hold event listener with Javascript

Question

I want to make a page with Click and Hold event effect, like http://andeinerseite.video/ or http://2016.makemepulse.com/, I\'m interested in what framework uses to create th

Answer 1

You can use Javascript's setTimeout function and bind it to mousedown events. Have a look at the snippet below:

// click and hold event listener

var timeout_id = 0,
    hold_time = 1000,
    hold_menu = $('.hold_menu'),
    hold_trigger = $('.hold_trigger');

hold_menu.hide();

hold_trigger.mousedown(function() {
    timeout_id = setTimeout(menu_toggle, hold_time);
}).bind('mouseup mouseleave', function() {
    clearTimeout(timeout_id);
});

function menu_toggle() {
  hold_menu.toggle();
}

ul.hold_menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.hold_menu a, div.hold_trigger  {
   display: inline-block;
   padding: 5px 15px;
   border: 1px solid #ccc;
   width: 300px;
}

ul.hold_menu a:link, ul.hold_menu a:visited {
   color: black;
   text-decoration: none;
}

ul.hold_menu a:active, ul.hold_menu a:hover {
   background: #ff0;
   text-decoration: none;
}

div.hold_trigger {
   color: black;
   cursor: pointer;
}

div.hold_trigger:hover {
   background: #ccc;
}

Click and hold to toggle the menu

   
Option 1
   
Option 2
   
Option 3

Hope this helps!