The quick menu

Quick menu layout and opening direction

The strip runs across by default. Stand it up and it becomes a column under the More button, which is the shape a bar docked down the left or right edge of the screen wants — a horizontal strip there reaches out across the text it was meant to sit beside.

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 two values

Only the one word stands it up. Anything else, including leaving the option out, is a row.

window.ats_config = { quick_orientation: 'vertical' };
window.ats_config = { quick_orientation: 'horizontal' };  /* the default */

Where it opens

The menu opens beside its trigger and moves with it. It flips above a bottom-docked bar when there is not enough room below, and shifts horizontally to remain within the viewport. Set quick_position to up or down to force a direction; auto restores space-based positioning. Unlike quick_orientation, this controls where the menu opens, not how its buttons are arranged. Leave room on the chosen side when forcing a direction.

window.ats_config = { quick_position: 'up' };
window.ats_config = { quick_position: 'down' };
window.ats_config = { quick_position: 'auto' };  /* the default */

The always-open strip is a different shape

A static strip is not lifted out of the flow, so it lays out inside the kit rather than floating over the page. Vertical still stacks it, but what it stacks under is the row itself. Decide the axis after you have decided whether the strip has a trigger.

Live demo

Demo ↗

An article worth passing on

Press More and the strip stacks. This page sets only quick_orientation; like quick_count, it switches the quick menu on by itself.

Services (3 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<script>window.ats_config = window.ats_config || {}; window.ats_config.quick_orientation = "vertical";</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>

Floating share bar