The quick menu

The quick menu on the More button

Switch the quick menu on and the More button stops opening the full sheet: it opens a compact strip of the next few services instead, right where the reader pressed. Nothing becomes unreachable — the sheet is one press further in, from the plus at the end of the strip.

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

It is off until you ask for it

Without one of the quick options the More button does what it has always done and opens the full sheet. Three values switch the strip on; true is the shape people write when they simply want the thing, and it means click. Setting only how many it shows, or only which way it runs, switches it on as well — those two snippets would otherwise be options that do nothing.

window.ats_config = { quick_menu: 'click' };   // press to open
window.ats_config = { quick_menu: 'hover' };   // pointer opens it
window.ats_config = { quick_menu: 'static' };  // no trigger, always open

Which services it picks

Not the rest of your row — the top of the catalogue. The strip starts from every service the reader is allowed to reach, in catalogue order with your priority list floated to the front, then drops the ones this kit already shows inline: offering a second WhatsApp button an inch from the first wastes one of six slots. A kit that already shows everything available gets the plain top of the list rather than an empty strip.

It is built when the kit is wired, not when it opens

Each kit gets its own strip, in a wrapper around its own More button, so two kits on a page cannot borrow each other’s corner. The entries are ordinary anchors with real addresses in them, so middle-click and copy link address reach the service; they read the kit’s data-url exactly as the buttons in the row do. Escape closes the strip, so does a press anywhere outside it, and so does opening the full sheet. What they do not get is a share count: the number belongs to the row.

Live demo

Demo ↗

An article worth passing on

Press More. The strip that opens carries six services this row is not already showing, and the plus at its end opens the whole catalogue.

Services (3 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

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

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