The menu

Open the menu on hover

The More button opens on press by default. Ask for hover and the sheet opens once the pointer has rested on the button for a moment, which suits a dense desktop layout — but only where there is a pointer at all. On a touch screen it stays a tap, because a finger cannot hover.

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_btn_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

What to watch for

Hover has no equivalent on touch, where the widget always falls back to tap.

The delay is what makes it bearable

hover_delay is milliseconds, and 200 is the default. A pointer crossing the button on its way somewhere else opens nothing, because leaving cancels the timer that had not fired yet. The value is bounded rather than trusted: anything missing, negative or unparseable falls back to 200, and anything above two seconds is capped there.

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

Touch never gets the hover version

A coarse pointer keeps the press, whatever this option says. The test is the pointer, not the screen width — matchMedia on (pointer: coarse), with a user-agent sniff only as the fallback for browsers that have no matchMedia. So there is no state in which the first tap appears to do nothing, which is what a hover control costs on a phone.

A quick menu takes this decision over

Ask for the compact strip in any of its forms and it owns the More button: this option is not read at all, and quick_menu decides whether the strip opens on press or on hover. Worth knowing because quick_count and quick_orientation switch the strip on by themselves — setting either of them is enough to make menu_trigger stop doing anything.

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

Live demo

Demo ↗

An article worth passing on

Hold the pointer over the More button for a fifth of a second and the sheet opens. Pressing it still works, and so do Enter and Space when it has focus.

Services (4 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<script>
window.ats_config = window.ats_config || {};
window.ats_config.menu_trigger = "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_btn_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

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