<h1>Centered</h1>
<div class="dropdown">
  <a href="#" class="btn">
    Dropdown
  </a>
  <div class="outer-list">
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
    </ul>
  </div>
</div>

<div class="sep"></div>

<h1>Top Centered</h1>
<div class="dropdown">
  <a href="#" class="btn">
    Dropdown
  </a>
  <div class="outer-list top">
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
    </ul>
  </div>
</div>

<div class="sep"></div>

<h1>Bottom Centered</h1>
<div class="dropdown">
  <a href="#" class="btn">
    Dropdown
  </a>
  <div class="outer-list bottom">
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
    </ul>
  </div>
</div>

@anim-duration: .35s;
@import url('https://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300,400,600');
* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

body {
  padding-bottom: 6em;
}

h1 {
  font-family: 'Pacifico', cursive;
  font-size: 2.25em;
  margin-bottom: .5em;
  text-align: center;
}

a {
  text-decoration: none;
}

.sep {
  width: 40%;
  height: 1px;
  margin: 2.5em auto;
  background: rgba(0, 0, 0, .2);
}

.btn {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  background: #03A9F4;
  color: #fff;
  padding: 1em;
  border-radius: .15em;
  cursor: pointer;
  transition: all @anim-duration ease;
  overflow: hidden;
  &:after {
    content: '';
    position: absolute;
    bottom: -50%;
    right: -50%;
    z-index: 1;
    overflow: hidden;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    transition: all @anim-duration ease;
  }
  &:active:after,
  &.dropdown-open:after {
    width: 200%;
    height: 200%;
  }
  &:hover {
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .1);
  }
  &.dropdown-open + .outer-list {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
  }
}

.dropdown {
  position: relative;
  margin: 0 auto;
  width: 15em;
  > .outer-list {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
    transition: all @anim-duration ease;
    &.top {
      align-items: flex-start;
      transform-origin: 50% 0;
    }
    &.left {
      justify-content: flex-start;
    }
    &.bottom {
      align-items: flex-end;
      transform-origin: 50% 100%;
    }
    &.right {
      justify-content: flex-end;
    }
    > ul {
      list-style: none;
      padding: 0;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background: rgba(255, 255, 255, .95);
      box-shadow: 0 0 2px 1px rgba(0, 0, 0, .1);
      border-radius: .2em;
      li {
        padding: .25em 3em;
        margin: .25em;
        width: 100%;
        cursor: pointer;
        transition: background @anim-duration ease;
        &:hover {
          background: rgba(0, 0, 0, .07);
        }
      }
    }
  }
}

'use strict';

(function() {

  var _btns = document.querySelectorAll('.btn'),

    _eachBtn = function(callback) {
      Array.prototype.forEach.call(_btns, function(elem) {
        callback.call(this, elem);
      });
    },
    _initListener = function(e) {
      e.preventDefault();
      e.stopPropagation();
      _eachBtn(function(btn) {
        btn.classList.remove('dropdown-open')
      });
      this.classList.toggle('dropdown-open');
    },
    _hideAll = function() {
      _eachBtn(function(btn) {
        btn.classList.remove('dropdown-open');
      });
    };

  _eachBtn(function(btn) {
    btn.addEventListener('touchend', function(e) {
      _initListener.call(this, e);
    });

    btn.addEventListener('click', function(e) {
      _initListener.call(this, e);
    });
  });

  document.addEventListener('touchend', function() {
    _hideAll();
  });
  
  document.addEventListener('click', function() {
    _hideAll();
  });

})();