lappi-lynx/position-try-menu-example.html

## position-try-menu-example.html
<html>
  <body>
    <button popovertarget="menu">Menu</button>
    <div id="menu" popover>
      <a href="https://www.google.com">Google</a>
      <a href="https://www.yahoo.com">Yahoo</a>
      <a href="https://www.bing.com">Bing</a>
    </div>

    <style>
      body {
        min-height: 100vh;
        font-family: 'Poppins', Tahoma, Geneva, Verdana, sans-serif !important;
        display: flex;
        align-items: start;
        justify-content: start;
      }

      button {
        padding: 0.7em 2em;
        font-size: 1em;
        font-weight: 400;
        color: #fff;
        background-color: #4e22d4;
        border: none;
        border-radius: 0.25em;
        cursor: pointer;
        anchor-name: --menu;
        font-family: inherit;
      }
      #menu {
        width: max-content;
        border: 1px solid #ccc;
        border-radius: 0.25em;
        padding: 0.5em;
        background-color: #fff;
        box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.1);
        position: absolute;
        position-anchor: --menu;
        inset: unset;
        top: anchor(bottom);
        left: anchor(left);
        position-try-fallbacks: --below-right, --below-left, --up-left;

        &:popover-open {
          display: grid;
        }

        a {
          text-decoration: none;
          padding: 0.7em 1.25em;
          border-radius: 0.25em;
          color: #000;
        }

        a:hover {
          background-color: #eee;
        }
      }

      @position-try --below-right {
        inset: unset;
        top: anchor(bottom);
        left: anchor(left);
      }

      @position-try --below-left {
        inset: unset;
        top: anchor(bottom);
        right: anchor(right);
      }

      @position-try --up-left {
        inset: unset;
        bottom: anchor(top);
        right: anchor(right);
      }
    </style>
  </body>
</html>
No results found