Isabel Cariod Isabel Cariod - 3 months ago 27
CSS Question

Click and Hold event listener with Javascript

I want to make a page with Click and Hold event effect, like or, I'm interested in what framework uses to create those effects.


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_trigger.mousedown(function() {
    timeout_id = setTimeout(menu_toggle, hold_time);
}).bind('mouseup mouseleave', function() {

function 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;
<script src=""></script>

<div class="hold_trigger">Click and hold to toggle the menu</div>
<ul class="hold_menu">
   <li><a href="#">Option 1</a></li>
   <li><a href="#">Option 2</a></li>
   <li><a href="#">Option 3</a></li>

Hope this helps!