Tachyons: Popover menu

[j-greig]

A small overlay that opens to reveal additional actions.

• Button
• Overlay containing...
  * Actions
  * Form elements

Example link: https://polaris.shopify.com/components/overlays/popover#navigation

[mrkhdly]

I've made this awhile ago. https://codepen.io/mrkhdly/pen/eBXVxy Might be useful

[cmnstmntmn]

motivation

I've made an example, having in mind the following:

• the component could be shown by default;
• the component state should be altered from JS and visible from inside it.

implementation

• an <input type="checked" class="toggle-sibling clip" /> is used to keep track of the element state;
• an ~ selector is used to target the sibling popover element;
• two classes are needed to put everything all together toggle-sibling and sibling

code

<div class="relative">

  <!-- visual trigger -->
  <label for="listUniqueName" class="ma0 bg-silver br2 pa1 dib link hover-bg-moon-gray pointer">
    Items ...
  </label>

  <!-- state trigger element -->
  <input class="toggle-sibling clip" type="checkbox" id="listUniqueName" />

  <!-- popover element -->
  <dl class="sibling mt0 absolute bg-black-80 br1 pa2 white mt1">
     <dt class="green">Fruits</dt>
     <dd class="ma0">Banana</dd>
     <dd class="ma0">Apple</dd>
     <dd class="ma0">Orange</dd>
     <dt class="green">Vegetables</dt>
     <dd class="ma0">Carrot</dd>
     <dd class="ma0">Tomato</dd>
     <dd class="ma0">Garlic</dd>
  </dl>
</div>

.sibling {
  opacity: 0;
  transition: opacity .15s ease-in;
  visibility: hidden; /* Make it hidden */
}

.toggle-sibling:checked ~ .sibling {
  opacity: 1;
  transition: opacity .15s ease-in;
  visibility: visible; /* Make it visible */
}

demo

flems link

pros

• the html markup will always be valid since we're not going to have this king of invalid nesting

<button>
    <span>Items</span>
    <dl> ... </dl>
</button>

• we can have any kind of popovers

cons

• the main downside is that an extra element is needed;
• the user should keep track for all input id and label's for attributes;
• ARIA should be considered - i don't know how accesible this implementation is.