The quick menu

A quick menu that is always open

Set the strip to static and there is nothing to press: it renders with the kit, permanently visible, a second row of services under the first. The More button beside it keeps the job it had before, which is opening the full catalogue.

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_dd"></a>
</div>

It has no plus of its own

Every other mode gives the strip its own More entry, because the button that opened it is now behind it and the catalogue would otherwise be unreachable. A static strip never covered anything: the kit’s own More button is sitting right beside it doing that job, and two identical controls side by side is worse than one.

It still needs a More button

The strip hangs off the kit’s More button in every mode, static included, so a kit that leaves the More anchor out gets no strip at all. If an allowlist has emptied the catalogue the More button is removed as well, and the strip goes with it.

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

Nothing opens it and nothing shuts it

Hover does not apply — there is no delay to tune and no pointer to wait for. Escape and a press outside close the other three modes; here they have nothing to act on. That also makes this the one mode that costs vertical space on every page view, so keep the count low.

Live demo

Demo ↗

An article worth passing on

The strip under the row was not opened by anything and cannot be closed. More still opens the whole catalogue, exactly as it would with no quick menu at all.

Services (2 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<script>
window.ats_config = window.ats_config || {};
window.ats_config.quick_menu = "static";
window.ats_config.quick_count = 4;
</script>

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

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

How many show