Isabel Cariod Isabel Cariod - 1 year ago 137
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.

Answer Source

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!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download