nfreear/bs-drop-horizontal-sideways-menu.html

## bs-drop-horizontal-sideways-menu.html
<!doctype html> <title> *BS Drop-horizontal </title>

<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" />

<style>
.dropdown-menu {
  background: #eee;
  border-radius: 0;
}

.custom-drop-horiz .dropdown-menu {
  left: -255px; /* Dynamic !! 255px for 3 */
  right: auto;
  bottom: auto;
  top: 0;
  width: auto;
  min-width: unset;
  padding: .25rem;

/*
  x-transition: all .5s;
  */
}

.custom-drop-horiz .dropdown-item {
  display: inline-block;
  padding: .2rem .5rem;
  width: auto;
}
</style>


<div class="container">

<h1> BS Drop-sideways menu </h1>

<p> . <p> . <p> . <p> . </p>


<div class="X-dropdown dropup custom-drop-horiz float-right">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">1. Action</a>
    <a class="dropdown-item" href="#">2. action</a>
    <a class="dropdown-item" href="#">3. action</a>
    <a class="dropdown-item" href="#">4. action</a>
  </div>
</div>


</div>


<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.slim.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js"></script>


<script>
  const $DROP_HORIZ = $('.custom-drop-horiz');
  const $DROP_MENU = $DROP_HORIZ.find('.dropdown-menu');

  $DROP_HORIZ.find('.dropdown-toggle').on('click', ev => {
    // $(ev.target)
    window.setTimeout(() => {
      console.warn('click:', ev, $DROP_MENU.get(0), $DROP_MENU.width())

      $DROP_MENU.attr('style', '')
      $DROP_MENU.get(0).style.left = '-' + ( $DROP_MENU.width() + 12 ) + 'px';
    }, 5)
  })
</script>


<pre class="container">


NDF, 17-May-2019.

* https://getbootstrap.com/docs/4.0/components/dropdowns/

</pre>