The quick menu

Opening the quick menu on hover

On a dense desktop layout the strip can open as the pointer arrives, after a delay you set. A finger has no hover, so on a coarse pointer this option quietly becomes a tap rather than a control that appears to do nothing on the first press.

The code

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_linkedin"></a>
  <a class="ats_dd"></a>
</div>

The delay is what makes it bearable

Two hundred milliseconds by default. Without a delay every pointer crossing the button on its way somewhere else opens a panel over the page. The value is bounded rather than trusted: a string is read, a negative or a word falls back to 200, and anything above two seconds is clamped — a typo should not produce a button that never opens.

window.ats_config = { quick_menu: 'hover', hover_delay: 350 };

Leaving closes it, but the gap does not

The hover is bound to the wrapper that holds the button and the strip together, so moving down into the strip is not leaving. The air under the trigger is padding inside the panel rather than a real gap, because a dead band between the two would close the strip just as the reader reached for it. Moving off both cancels a pending open and shuts an open one.

What hover is not

A keyboard cannot hover, so Enter and Space on the More button open the same strip whichever trigger is set. And this option is not menu_trigger: with a quick menu configured, quick_menu decides the trigger on its own and menu_trigger is never consulted. menu_trigger is for a kit with no strip, where hovering opens the full sheet.

Live demo

Demo ↗

An article worth passing on

Rest the pointer on More and wait a fifth of a second. Move away and it closes again — and a press opens it just as well, because the click path is still bound.

Services (3 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<script>
window.ats_config = window.ats_config || {};
window.ats_config.quick_menu = "hover";
window.ats_config.hover_delay = 200;
</script>

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_linkedin"></a>
  <a class="ats_dd"></a>
</div>

<script async src="//static.addtosite.com/widget.js"></script>