JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<table style="width:100%" class="custom-style">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <td>
      <div class="dropout">
        <button class="more">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul>
          <li>
            <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a>
          </li>
          <li>
            <button type="button" class="btns raised grey">Detailbutton
            </button>
          </li>
        </ul>
      </div>
    </td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td>
      <div class="dropout">
        <button class="more">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul>
             <li>
            <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a>
          </li>
          <li>
            <button type="button" class="btns raised grey">Detailbutton
            </button>
          </li>
        </ul>
      </div>
    </td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td>

      <div class="dropout">
        <button class="more">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul>
            <li>
            <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a>
          </li>
          <li>
            <button type="button" class="btns raised grey">Detailbutton
            </button>
          </li>
        </ul>
      </div>
    </td>
  </tr>
</table>
<hr>
<table style="width:100%" class="custom-style">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <td>
      <div class="dropout">
        <button class="more">
         ...

CSS

.more {
  cursor: pointer;
  border: none;
  background: transparent;
  display: block;
  margin-top: auto;
  margin-bottom: auto;
}

.more span {
  display: block;
  width: .30rem;
  height: .30rem;
  background: #363636;
  border-radius: 50%;
  pointer-events: none;
}

.more span:not(:last-child) {
  margin-bottom: .125rem;
}

.dropoutY {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.dropout {
  display: block;
  margin-top: auto;
  margin-bottom: auto;
  float: right;
}

.dropout ul {
  position: absolute;
  top: auto;
  right: 2rem;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.12s ease;
  color: #fff;
  background: rgba(33, 33, 33, 0.85);
  border-radius: 10px;
  padding: 20px 20px 20px 20px;
  list-style-type: none;
}

.dropout input {
  background: none;
  border: none;
}

.dropout btns {
  background: none;
  border: none;
}

.dropout.active ul {
  transform: scaleX(1);
}

.btns {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 32px;
  line-height: 32px;
  border-radius: 2px;
  font-size: 0.9em;
  background-color: #fff;
  color: #646464;
  margin: 5px;
}

.btns>paper-ripple {
  border-radius: 2px;
  overflow: hidden;
}

.btns.narrow {
  width: 60px;
}

.btns.grey {
  background-color: #eee;
}

.btns.blue {
  background-color: #4285f4;
  color: #fff;
}

.btns.green {
  background-color: #0f9d58;
  color: #fff;
}

.btns.red {
  background-color: #cb3a3a;
  color: #fff;
}

.btns.light-blue {
  background-color: lightblue;
  color: #fff;
}

.btns.darkcyan {
  background-color: darkcyan;
  color: #fff;
}

.btns.raised {
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.2s;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.btns.raised:active {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
  transition-delay: 0s;
}

.centered-text {
  text-align: center;
}

JavaScript

$(document).ready(function() {
const windowHeight = $(window).height() - 10;
const menuBottom = $(menu_side).get(0).getBoundingClientRect().bottom;
  Array.from(document.querySelectorAll('.custom-style')).forEach(function(menu_side) {
    menu_side.onclick = ({
      target
    }) => {
      if (!target.classList.contains('more')) return
      document.querySelectorAll('.dropout.active').forEach(
        (d) => d !== target.parentElement && d.classList.remove('active')
      )
      if (menuBottom >= windowHeight) {
  target.parentElement.classList.add("dropoutY");
}
      target.parentElement.classList.toggle('active');
    }

  });

});