Alert Message

by Tuan Truong

HTML

<div class="dropdown-container">
  <div class="relative">
    <button class="button">Click</button>
    <div class="dropdown">
      <span>awesome 1</span>
      <span>awesome 2</span>
      <span>awesome 3</span>
      <span>awesome 4</span>
    </div>
  </div>
</div>

CSS

body {
  font-family: sans-serif;
  background-color: #ccc;
}

.dropdown-container {
  display: flex;
  justify-content: center;
}

.dropdown {
  animation: fadein 300ms ease;
  width: 200px;
  position: absolute;
  display: none;
  flex-direction: column;
  box-shadow: 0 0 25px rgba(0, 0, 0, .15);
  top: 31px;
  background: #fff;
  border-radius: 3px;
  padding: .5rem 0;
  &.show {
    display: flex;
  }
  &::before {
    content: '';
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    top: -7px;
    left: 14px;
    transform: rotate(-45deg);
  }
  >span {
    padding: 1rem;
    z-index: 2;
    &:hover {
      background: #eee;
    }
  }
}

.relative {
  position: relative;
}

@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

JavaScript

const button = document.querySelector('button')
const el = document.querySelector('.dropdown')

button.addEventListener('click', handleClick)

function handleClick() {
	el.classList.toggle('show')
}